<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  class="ml8">{{ 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  class="ml8">{{ 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.vehicle.model')">
              <span  class="ml8">{{ baseInfo.vehicleModel }}</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.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  class="ml8">{{ baseInfo.platform }}</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.level')">
              <span  class="ml8">{{ baseInfo.projectLevel }}</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.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>
          <!-- CPAC编码 -->
          <a-col :xl="6" :lg="8" :md="12" :sm="24" :xs="24">
            <a-form-item :label="$t('base.info.CPAC-code')">
              <span  class="ml8">{{ baseInfo.cpacCode }}</span>
            </a-form-item>
          </a-col>
          <!-- 产品工程师 -->
          <a-col :xl="6" :lg="8" :md="12" :sm="24" :xs="24">
            <a-form-item :label="$t('workbench.product-engineer')">
              <span v-if="!isEdit" class="ml8">{{ baseInfo.productEngineer }}</span>
              <a-select
                v-else
                class="select-width"
                v-model="productEngineer"
                :filter-option="filterOption"
                :options="engineerList"
                :placeholder="$t('workbench.please-enter-product-engineer')"
                showSearch
                @change="changeProductEngineer"
              >
                <a-icon slot="suffixIcon" type="search"/>
                <a-select-option
                  v-for="item in engineerList"
                  :key="item.productEngineerId"
                >
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <!-- 材料工程师 -->
          <a-col :xl="6" :lg="8" :md="12" :sm="24" :xs="24">
            <a-form-item :label="$t('workbench.material-engineer')">
              <span v-if="!isEdit" class="ml8">{{ baseInfo.materialsEngineer }}</span>
              <a-select
                v-else
                class="select-width"
                v-model="materialEngineer"
                :filter-option="filterOption"
                :options="engineerList"
                :placeholder="$t('workbench.please-enter-material-engineer')"
                showSearch
                @change="changeMaterialEngineer"
              >
                <a-icon slot="suffixIcon" type="search"/>
                <a-select-option
                  v-for="item in engineerList"
                  :key="item.materialsEngineerId"
                >
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <!-- 零部件工程师 -->
          <a-col :xl="6" :lg="8" :md="12" :sm="24" :xs="24">
            <a-form-item :label="$t('workbench.parts-engineer')">
              <span v-if="!isEdit" class="ml8">{{ baseInfo.partEngineer }}</span>
              <a-select
                v-else
                class="select-width"
                v-model="partsEngineer"
                :filter-option="filterOption"
                :options="engineerList"
                :placeholder="$t('workbench.please-enter-parts-engineer')"
                showSearch
                @change="changePartsEngineer"
              >
                <a-icon slot="suffixIcon" type="search"/>
                <a-select-option
                  v-for="item in engineerList"
                  :key="item.partEngineerId"
                >
                  {{ item.name }}
                </a-select-option>
              </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 class="ml8">{{ 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,      // 编辑标识
      productEngineer: undefined,   // 产品工程师
      materialEngineer: undefined,   // 材料工程师
      partsEngineer: undefined,   // 零件工程师
      productEngineerId: undefined,   // 产品工程师Id
      materialsEngineerId: undefined,   // 材料工程师Id
      partsEngineerId: undefined,   // 零件工程师Id
      engineerList: []      // 工程师字典
    };
  },
  mounted() {
    this.initBaseInfo();
    this.getEngineer();
  },
  methods: {
    //获取基本信息
    async initBaseInfo() {
      let _that = this;
      let data = {
        dvpId: _that.$store.getters.dvpId
      }
      _that.$api.getComponentsDvpBasicInformation(data).then(res =>{
        if (res.flag){
          _that.baseInfo = res.data;
        } else{
          _that.$message.error(res.message, 1);
        }
      })
    },
    // 保存
    doSave() {
      console.log(this.baseInfo.materialsEngineerId)
      //基本信息保存请求参数-目前只能更改工程师
      let basicInfoData = {
        dvpId: this.$store.getters.dvpId,
        productEngineerId: this.productEngineerId,
        materialsEngineerId: this.materialEngineerId ,
        partEngineerId: this.partsEngineerId,
        dvpType: 2,
      };
      //保存基本信息-工程师
      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/componentsDVP/edit?dvpId='
        + this.$route.query.dvpId
        + '&lookFlag=2';
      let backUrl = this.$api.fmUrl + '/#' + infoUrl
      window.open(backUrl, '_top')
    },
    //获取工程师下拉选项
    getEngineer(){
      this.$api.getAllUsers().then(res => {
        if (res.flag) {
          let userList = res.data;
          userList.forEach(item => {
            let options = {
              label: item.fullname,  //后端返回的不是驼峰命名，所以这样写
              value: item.userId
            };
            this.engineerList.push(options);
          });
        }
      });
    },
    // 产品工程师下拉选项变换时
    changeProductEngineer(value) {
      this.productEngineerId = value;
    },
    // 材料工程师下拉选项变换时
    changeMaterialEngineer(value) {
      this.materialEngineerId = value;
    },
    // 零部件工程师下拉选项变换时
    changePartsEngineer(value) {
      this.partsEngineerId = value;
    },
		// 下拉选项过滤
		filterOption(input, option) {
			return (option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0);
		},
  },
  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>
