<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('plan.dvp.project-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  class="ml8">{{ 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  class="ml8">{{ 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">
          <!-- DVP编号 -->
          <a-col :xl="6" :lg="8" :md="12" :sm="24" :xs="24">
            <a-form-item :label="$t('base.info.dvp-code')">
              <span  class="ml8">{{ baseInfo.dvpCode }}</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.cpac }}</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.system-name')">
              <span  class="ml8">{{ baseInfo.systemName }}</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">{{ owner }}</span>
              <a-select
                v-else
                class="select-width"
                v-model="baseInfo.owner"
                :filter-option="filterOption"
                :placeholder="$t('base.info.please-choose-owner')"
                showSearch
                @change="changeOwner"
              >
                <a-icon slot="suffixIcon" type="search"/>
                <a-select-option
                  v-for="item in requirementOwnerList"
                  :key="item.userId"
                >
                  {{ item.fullname }}
                </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: this.$store.getters.dvpId,    //dvpId
      baseInfo: {},        //基本信息
      isEdit: false,      // 编辑标识
      owner: undefined,   // 责任人
			// 需求负责人下拉选项
			requirementOwnerList: [],
    };
  },
  created() {},
  mounted() {
    this.initBaseInfo();
    this.getRequirementOwner();
  },
  methods: {
    //获取基本信息
    async initBaseInfo() {
      let _that = this;
      let data = {
        dvpId: _that.dvpId
      }
      _that.$api.systemDvpBasicInformation(data).then(res => {
        if (res.flag){
          _that.baseInfo = res.data;
          _that.owner = res.data.owner;
          //处理"年"，只显示年份不显示后面日期与时间
          if (_that.baseInfo.year){
            _that.baseInfo.year = _that.baseInfo.year.slice(0,4)
          }
        } else{
          _that.$message.error(res.message, 1);
        }
      })
    },
    // 保存
    doSave() {
      if (!this.owner) {
        return this.$message.warning(this.$t('base.info.please-choose-owner'), 1);
      }
      let data = {
        dvpId: this.dvpId,
        ownerId: this.baseInfo.ownerId,
        dvpType: 1,
      };
      this.$api.updateDvpBasicInformation(data).then(res => {
        if (res.flag){
          this.$message.success(res.message, 1);
          this.initBaseInfo();
          this.isEdit = !this.isEdit;
        } else{
          this.$message.error(res.message, 1);
        }
      })
    },
    // 编辑
    doEdit() {
      let infoUrl = '/dvp/systemDVP/edit?dvpId='
        + this.$route.query.dvpId
        + '&lookFlag=2';
      let backUrl = this.$api.fmUrl + '/#' + infoUrl
      window.open(backUrl, '_top')
    },
    // 责任人下拉选项变换时
    changeOwner(value, options) {
      this.baseInfo.ownerId = options ? options.data.key : undefined;
    },
		// 下拉选项过滤
		filterOption(input, option) {
			return (option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0);
		},
		//获取需求负责人下拉选项
		getRequirementOwner(){
			this.$api.getAllUsers().then(res =>{
				if (res.flag){
					this.requirementOwnerList = res.data;
				} else {
          this.$message.error(res.message, 1);
        }
			});
		},
  },
  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>
