<template>
  <a-card class="back-card">
    <!-- 编辑 -->
    <a-button
      v-if="$api.btnPms && !isEdit"
      class="mr-24"
      slot="extra"
      type="primary"
      @click="doEdit()" >
      {{ $t('global-btn.edit') }}
    </a-button>
    <!-- 保存 -->
    <a-button
      v-if="$api.btnPms && isEdit"
      class="mr-24"
      slot="extra"
      type="primary"
      @click="doSave()">
        {{ $t('global-btn.save') }}
    </a-button>
    <div class="pad-12">
      <a-form layout="inline">
        <a-row :gutter="24">
          <!-- 项目编号 -->
          <a-col :xl="6" :lg="8" :md="12" :sm="24" :xs="24">
            <a-form-item :label="$t('base.info.project.number')">
              <span :title="baseInfo.projectNo" class="ml8">{{ $t(baseInfo.projectNo).length > 15 ? baseInfo.projectNo.slice(0,15) + "..." : baseInfo.projectNo }}</span>
            </a-form-item>
          </a-col>
          <!-- 项目名称 -->
          <a-col :xl="6" :lg="8" :md="12" :sm="24" :xs="24">
          <a-form-item :label="$t('base.info.project.name')">
            <span :title="baseInfo.projectName" class="ml8">{{ $t(baseInfo.projectName).length > 15 ? baseInfo.projectName.slice(0,15) + "..." : baseInfo.projectName }}</span>
          </a-form-item>
          </a-col>
          <!-- 项目状态 -->
          <a-col :xl="6" :lg="8" :md="12" :sm="24" :xs="24">
            <a-form-item :label="$t('base.info.project.status')">
              <span  class="ml8">{{ baseInfo.projectState }}</span>
            </a-form-item>
          </a-col>
          <!-- 当前节点 -->
          <a-col :xl="6" :lg="8" :md="12" :sm="24" :xs="24">
            <a-form-item :label="$t('base.info.current.node')">
              <span  class="ml8">{{ baseInfo.projectNode }}</span>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <!-- 车型 -->
          <a-col :xl="6" :lg="8" :md="12" :sm="24" :xs="24">
            <a-form-item :label="$t('base.info.vehicle.model')">
              <span :title="baseInfo.vehicleModel" class="ml8">{{ $t(baseInfo.vehicleModel).length > 15 ? baseInfo.vehicleModel.slice(0,15) + "..." : baseInfo.vehicleModel }}</span>
            </a-form-item>
          </a-col>
          <!-- 产品类型 -->
          <a-col :xl="6" :lg="8" :md="12" :sm="24" :xs="24">
            <a-form-item :label="$t('base.info.product.type')">
              <span  class="ml8">{{ baseInfo.productType }}</span>
            </a-form-item>
          </a-col>
          <!-- 年 -->
          <a-col :xl="6" :lg="8" :md="12" :sm="24" :xs="24">
            <a-form-item :label="$t('base.info.year')">
              <span  class="ml8">{{ baseInfo.year }}</span>
            </a-form-item>
          </a-col>
          <!-- 平台 -->
          <a-col :xl="6" :lg="8" :md="12" :sm="24" :xs="24">
            <a-form-item :label="$t('base.info.platform')">
              <span :title="baseInfo.platform" class="ml8">{{$t(baseInfo.platform).length > 15 ? baseInfo.platform.slice(0,15) + "..." : baseInfo.platform }}</span>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <!-- 项目等级 -->
          <a-col :xl="6" :lg="8" :md="12" :sm="24" :xs="24">
            <a-form-item :label="$t('base.info.project.level')">
              <span  class="ml8">{{ baseInfo.projectLevel }}</span>
            </a-form-item>
          </a-col>
          <!-- 项目总监 -->
          <a-col :xl="6" :lg="8" :md="12" :sm="24" :xs="24">
            <a-form-item :label="$t('base.info.project.director')">
              <span  class="ml8">{{ baseInfo.projectDirector !== "null" ? baseInfo.projectDirector : '--' }}</span>
            </a-form-item>
          </a-col>
          <!-- 项目经理 -->
          <a-col :xl="6" :lg="8" :md="12" :sm="24" :xs="24">
            <a-form-item :label="$t('base.info.project.manager')">
              <span  class="ml8">{{ baseInfo.projectManager !== "null" ? baseInfo.projectManager : '--' }}</span>
            </a-form-item>
          </a-col>
          <!-- 计划完成时间 -->
          <a-col :xl="6" :lg="8" :md="12" :sm="24" :xs="24">
            <a-form-item :label="$t('base.info.planned.completion.date')">
              <span  class="ml8">{{ baseInfo.plannedCompletionDate }}</span>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <!-- 性能模块 -->
          <a-col :xl="6" :lg="8" :md="12" :sm="24" :xs="24">
            <a-form-item :label="$t('base.info.performance.module')">
              <span  class="ml8">{{ baseInfo.performanceModuleCode }}</span>
            </a-form-item>
          </a-col>
          <!-- 需求部门 -->
          <a-col :xl="6" :lg="8" :md="12" :sm="24" :xs="24">
            <a-form-item :label="$t('base.info.demand.department')">
              <span  class="ml8">{{ baseInfo.department }}</span>
            </a-form-item>
          </a-col>
          <!-- 需求负责人 -->
          <a-col :xl="12" :lg="8" :md="12" :sm="24" :xs="24">
            <a-form-item :label="$t('base.info.requirement.owner')">
              <span v-if="!isEdit" class="ml8">{{ ownerName }}</span>
              <a-select
                v-else
                class="select-width"
                v-model="baseInfo.owner"
                :filter-option="filterOption"
                :options="requirementOwnerList"
                :placeholder="$t('base.info.please-choose-owner')"
                @change="handleOwnerChange"
                showSearch>
                <a-icon slot="suffixIcon" type="search"/>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <!-- 开发范围 -->
          <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
            <a-form-item :label="$t('base.info.development.scope')" >
              <span :title="baseInfo.developRange" class="ml8">{{ $t(baseInfo.developRange).length > 60 ? baseInfo.developRange.slice(0,60) + "..." : baseInfo.developRange }}</span>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
  </a-card>
</template>

<script>


export default {
  name: "baseInfo",
  components: {
  },
  data() {
    return {
      dvpId: undefined,    //dvpId
      baseInfo: {},        //基本信息
      isEdit: false,      // 编辑标识
      owner: undefined,   // 责任人
      requirementOwnerList: [],      // 责任人字典
      ownerName: undefined
    };
  },
  created() {},
  mounted() {
    this.initBaseInfo();
    this.getRequirementOwner();
  },
  methods: {
    //获取基本信息
    async initBaseInfo() {
      let _that = this;
      let data = {
        dvpId: _that.$store.getters.dvpId
      }
      _that.$api.initDvpBasicInformation(data).then(res =>{
        if (res.flag){
          _that.baseInfo = res.data;
          _that.ownerName = res.data.owner;
          //处理"年"，只显示年份不显示后面日期与时间
          if (_that.baseInfo.year){
            _that.baseInfo.year = _that.baseInfo.year.slice(0,4)
          }
          // 性能模块
          this.$store.dispatch("dvp/set", {
            key: "performanceModuleCode",
            value: _that.baseInfo.performanceModuleCode
          });
        } else{
          _that.$message.error(res.message, 1);
        }
      })
    },
    //获取需求负责人下拉选项
    getRequirementOwner(){
      this.$api.getAllUsers().then(res =>{
        if (res.flag){
          let userList = res.data;
          userList.forEach(item =>{
            let options = {
              label: item.fullname,  //后端返回的不是驼峰命名，所以这样写
              value: item.userId
            };
            this.requirementOwnerList.push(options);
          });
        }
      });
    },
    // 保存
    doSave() {
      //基本信息保存请求参数-目前只能更改需求负责人
      let basicInfoData = {
        dvpId: this.$store.getters.dvpId,
        ownerId: this.baseInfo.ownerId,
        dvpType: 0,
      };
      //保存基本信息-需求负责人
      this.$api.updateDvpBasicInformation(basicInfoData).then(res => {
        if (res.flag) {
          this.$message.success(this.$t('plan.dvp.operation-succeeded'), 1);
          this.initBaseInfo();
          this.isEdit = !this.isEdit;
        } else{
          this.$message.error(this.$t('plan.dvp.operation-failed'), 1);
        }
      });
    },
    // 编辑
    doEdit() {
      let infoUrl = '/dvp/fullVehicle/edit?dvpId='
        + this.$route.query.dvpId
        + '&lookFlag=2';
      let backUrl = this.$api.fmUrl + '/#' + infoUrl
      window.open(backUrl, '_top')
    },
		// 下拉选项过滤
		filterOption(input, option) {
			return (option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0);
		},
    // 下拉选改变
    handleOwnerChange(val) {
      this.baseInfo.ownerId = val;
    }
  },
  computed: {},
  filters: {}
};
</script>
<style lang="less" scoped>
.ant-pro-basicLayout-content {
  margin: 10px;
}
.back-card {
  border: hidden;
  border-radius: 0px;
}
.pad-12 {
  padding: 12px;
}
.mr-24 {
  margin-right: -24px;
}
.select-width {
  width: 240px;
}
</style>
