<template>
  <div class="app-container" v-loading="loading">
    <el-form ref="form" :model="form" :rules="rules" label-width="180px">
      <table class="table_register" style="width: 100%;">
        <tr>
          <th colspan="4" class="th_title">项目基本信息</th>
        </tr>
        <tr>
          <th><span style="color: red;">*</span>加计扣除年度</th>
          <td>
            <el-form-item prop="projectYear" label-width="0">
              <el-select v-model="form.projectYear" filterable :disabled="disabledVisible">
                <el-option v-for="(item, index) in yearsOptions" :key="index" :value="item.dictValue" :label="item.dictLabel"></el-option>
              </el-select>
            </el-form-item>
          </td>
          <th><span style="color: red;">*</span>研发成果</th>
          <td>
            <el-form-item prop="developFlag" label-width="0">
              <el-select v-model="form.developFlag" filterable :disabled="disabledVisible">
                <el-option v-for="(item, index) in successOptions" :key="index" :value="item.dictValue" :label="item.dictLabel"></el-option>
              </el-select>
            </el-form-item>
          </td>
        </tr>
        <tr>
          <th><span style="color: red;">*</span>项目名称</th>
          <td>
            <el-form-item prop="projectName" label-width="0">
              <el-input v-model="form.projectName" placeholder="请输入项目名称" :disabled="disabledVisible"></el-input>
            </el-form-item>
          </td>
          <th><span style="color: red;">*</span>立项时间</th>
          <td>
            <el-form-item prop="projectDate" label-width="0">
              <el-date-picker :disabled="disabledVisible"
                v-model="form.projectDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </td>
        </tr>
        <tr>
          <th><span style="color: red;">*</span>起止时间</th>
          <td>
            <el-form-item prop="projectTime" label-width="0">
              <!-- <el-input id="inputUI" v-model="form.projectTime" style="width: 220px"></el-input> -->
              <el-input  @focus="getLayDate" id="projectTime" v-model="form.projectTime" clearable :disabled="disabledVisible"></el-input>
            </el-form-item>
          </td>
          <th><span style="color: red;">*</span>项目类型</th>
          <td>
            <el-form-item prop="projectType" label-width="0">
              <el-select v-model="form.projectType" filterable :disabled="disabledVisible">
                <el-option v-for="(item, index) in projectTypeOptions" :key="index" :value="item.dictValue" :label="item.dictLabel"></el-option>
              </el-select>
            </el-form-item>
          </td>
        </tr>
      </table>
      <table class="table_register mt20" style="width: 100%;">
        <tr>
          <th colspan="4" class="th_title">项目负责人及研发人员
            <!-- <div class="tool"> -->
              <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="addFunc" style="margin-left: 10px" v-if="!disabledVisible">新增</el-button>
            <!-- </div> -->
          </th>
        </tr>
        <tr v-if="!disabledVisible">
          <td colspan="4">
            <el-table :data="form.headAddVOList" border>
              <el-table-column label="姓名" prop="name" align="center" width="120">
                <template slot-scope="scope">
                  <el-form-item label-width="0" :prop="'headAddVOList.'+scope.$index+'.name'">
                    <el-input v-model="scope.row.name"></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="性别" prop="sex" align="center" width="120">
                <template slot-scope="scope">
                  <el-form-item label-width="0" :prop="'headAddVOList.'+scope.$index+'.sex'">
                    <!-- <el-input v-model="scope.row.sex"></el-input> -->
                    <el-select v-model="scope.row.sex">
                      <el-option value="男">男</el-option>
                      <el-option value="女">女</el-option>
                    </el-select>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="身份证号" prop="idNumber" align="center" width="180">
                <template slot-scope="scope">
                  <el-form-item label-width="0" :prop="'headAddVOList.'+scope.$index+'.idNumber'">
                    <el-input v-model="scope.row.idNumber"></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="年龄" prop="age" align="center" width="80">
                <template slot-scope="scope">
                  <el-form-item label-width="0" :prop="'headAddVOList.'+scope.$index+'.age'">
                    <el-input v-model="scope.row.age"></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="学历" prop="education" align="center" width="150">
                <template slot-scope="scope">
                  <el-form-item label-width="0" :prop="'headAddVOList.'+scope.$index+'.education'">
                    <!-- <el-input v-model="scope.row.education"></el-input> -->
                    <el-select v-model="scope.row.education">
                      <el-option value="小学">小学</el-option>
                      <el-option value="初中">初中</el-option>
                      <el-option value="高中">高中</el-option>
                      <el-option value="专科">专科</el-option>
                      <el-option value="本科">本科</el-option>
                      <el-option value="硕士研究生">硕士</el-option>
                      <el-option value="博士">博士</el-option>
                    </el-select>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="所学专业" prop="major" align="center" width="150">
                <template slot-scope="scope">
                  <el-form-item label-width="0" :prop="'headAddVOList.'+scope.$index+'.major'">
                    <el-input v-model="scope.row.major"></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="现从事专业" prop="currentMajor" align="center" width="150">
                <template slot-scope="scope">
                  <el-form-item label-width="0" :prop="'headAddVOList.'+scope.$index+'.currentMajor'">
                    <el-input v-model="scope.row.currentMajor"></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="职称" prop="jobTitle" align="center" width="150">
                <template slot-scope="scope">
                  <el-form-item label-width="0" :prop="'headAddVOList.'+scope.$index+'.jobTitle'">
                    <el-input v-model="scope.row.jobTitle"></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="部门" prop="dept" align="center" width="150">
                <template slot-scope="scope">
                  <el-form-item label-width="0" :prop="'headAddVOList.'+scope.$index+'.dept'">
                    <el-input v-model="scope.row.dept"></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="在本项目中承担工作" prop="responsibilities" align="center" width="150">
                <template slot-scope="scope">
                  <el-form-item label-width="0" :prop="'headAddVOList.'+scope.$index+'.responsibilities'">
                    <el-input v-model="scope.row.responsibilities"></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="联系电话" prop="contactNumber" align="center" width="150">
                <template slot-scope="scope">
                  <el-form-item label-width="0" :prop="'headAddVOList.'+scope.$index+'.contactNumber'">
                    <el-input v-model="scope.row.contactNumber"></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center" width="150">
                <template slot-scope="scope">
                  <el-button v-if="!scope.row.disabled" type="text" class="danger" @click="delProcess(scope.$index)">移除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </td>
        </tr>
        <tr v-if="disabledVisible">
          <td colspan="4">
            <el-table :data="form.headAddVOList" border>
              <el-table-column label="姓名" prop="name" align="center" width="120">
              </el-table-column>
              <el-table-column label="性别" prop="sex" align="center" width="80">
              </el-table-column>
              <el-table-column label="身份证号" prop="idNumber" align="center" width="180">
              </el-table-column>
              <el-table-column label="年龄" prop="age" align="center" width="80">
              </el-table-column>
              <el-table-column label="学历" prop="education" align="center" width="80">
              </el-table-column>
              <el-table-column label="所学专业" prop="major" align="center" width="150">
              </el-table-column>
              <el-table-column label="现从事专业" prop="currentMajor" align="center" width="150">
              </el-table-column>
              <el-table-column label="职称" prop="jobTitle" align="center" width="150">
              </el-table-column>
              <el-table-column label="部门" prop="dept" align="center" width="150">
              </el-table-column>
              <el-table-column label="在本项目中承担工作" prop="responsibilities" align="center" width="150">
              </el-table-column>
              <el-table-column label="联系电话" prop="contactNumber" align="center" width="150">
              </el-table-column>
            </el-table>
          </td>
        </tr>
      </table>
      <table class="table_register mt20" style="width: 100%;">
        <tr>
          <th colspan="4" class="th_title">项目所属技术领域</th>
        </tr>
        <tr>
           <td colspan="4">
             <el-form-item prop="technicalFieldArray" label-width="0">
               <el-checkbox-group v-model="form.technicalFieldArray" :disabled="disabledVisible">
                 <el-checkbox v-for="(item, index) in techScopeOptions" :label="item.dictLabel" :key="item.dictValue" :name="item.dictLabel">{{item.dictLabel}}</el-checkbox>
               </el-checkbox-group>
             </el-form-item>
           </td>
        </tr>
      </table>
      <table class="table_register mt20" style="width: 100%;">
        <tr>
          <th colspan="4" class="th_title">技术来源</th>
        </tr>
        <tr>
           <td colspan="4">
             <el-form-item prop="technicalSourceArray" label-width="0">
               <el-checkbox-group v-model="form.technicalSourceArray" :disabled="disabledVisible">
                 <el-checkbox v-for="(item, index) in techSourceOptions" :label="item.dictLabel" :key="item.dictValue" :name="item.dictLabel">{{item.dictLabel}}</el-checkbox>
               </el-checkbox-group>
             </el-form-item>
           </td>
        </tr>
      </table>
      <table class="table_register mt20" style="width: 100%;">
        <tr>
          <th colspan="4" class="th_title">项目开发形式</th>
        </tr>
        <tr>
          <td colspan="4">
            <el-form-item prop="technicalFormArray" label-width="0">
              <el-checkbox-group v-model="form.technicalFormArray" :disabled="disabledVisible">
                <el-checkbox v-for="(item, index) in devOptions" :label="item.dictLabel" :key="item.dictValue" :name="item.dictLabel">{{item.dictLabel}}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </td>
        </tr>
      </table>
      <table class="table_register mt20" style="width: 100%;">
        <tr>
          <th colspan="4" class="th_title">新兴产业信息</th>
        </tr>
        <tr>
           <th><span style="color: red;">*</span>战略新兴产业</th>
           <td>
             <el-form-item prop="industry" label-width="0">
               <el-radio-group v-model="form.industry" :disabled="disabledVisible">
                 <el-radio v-for="(item, index) in booleanOptions" :key="index" :label="item.dictValue">{{item.dictLabel}}</el-radio>
               </el-radio-group>
             </el-form-item>
           </td>
           <template v-if="form.industry">
             <th><span style="color: red;">*</span>所属新兴产业领域</th>
             <td>
               <el-form-item prop="industryType" label-width="0">
                 <el-select v-model="form.industryType" filterable :disabled="disabledVisible">
                   <el-option v-for="(item, index) in industryTypeOptions" :key="index" :value="item.dictValue" :label="item.dictLabel"></el-option>
                 </el-select>
               </el-form-item>
             </td>
           </template>

        </tr>
      </table>
      <template v-if="type == 'update'">
        <el-row :gutter="40" v-if="!disabledVisible">
          <el-col :span="24">
            <el-form-item style="width:100%;text-align: center;" label-width="0px" class="mt20">
              <el-button :loading="loading" size="medium" type="primary" @click.native.prevent="submitForm" style="width: 100px;">保存</el-button>
              <el-button size="medium" type="primary" style="width: 100px;" @click="cancel">取消</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </template>
    </el-form>
  </div>
</template>

<script>
import { editProjectApi,getProjectInfoApi,synTechApi,draftApi,yearApi,declareUpdateApi,devProjectApi } from "@/api/enterprise/project/project"
import { techScopeOptions,yesOrNoOptions,businessIndustryOptions,techSourceOptions,devOptions,successOptions,projectTypeOptions,booleanOptions,industryTypeOptions } from "@/utils/dataFormat"
import FileUpload from '@/components/FileUpload'
import { listEntUserApi } from "@/api/ent/ent"
import { validAmount,validNumber,validPercentage} from '@/utils/validate'

export default {
  name: "First",
  components: {
    FileUpload
  },
  props: {
    type: {
      type: String
    },
    info: {
      type: Object,
      default: function () {
        return {}
      }
    },
  },
  computed: {
    userType() {
      return this.$store.state.user.userType
    },
    tempVariable() {
      let invest = this.form.techInvest
      let sales = this.form.sales
      return {invest, sales}
    },
    roleTypeFlag() {
      let roleType = this.$store.state.user.userType
      return ['ENT_ADMIN_TECH', 'ENT_ADMIN_FIN', 'ENT_FIN'].includes(roleType) //判断是否为技术负责人，财务负责人
    }
  },
  mounted() {
    let laydate = window.laydate;
    laydate.render({
      elem: '#inputUI', // 输入框的id属性，用来绑定到dom
      type: 'date',
      range: true,
      done: (value) => {
        this.form.projectTime = value; // 将选中的值赋给组件中的变量
      }
    });
  },
  data() {
    return {
      options: businessIndustryOptions,
      disabledVisible: false,
      adminId: undefined,
      techId: undefined,
      finId: undefined,
      serviceDate: [],
      provinceName: '',
      cityName: '',
      districtName: '',
      codeUrl: "",
      industryTypeOptions: industryTypeOptions,
      techScopeOptions: techScopeOptions,
      techSourceOptions: techSourceOptions,
      devOptions: devOptions,
      yesOrNoOptions: yesOrNoOptions,
      successOptions: successOptions,
      projectTypeOptions: projectTypeOptions,
      booleanOptions: booleanOptions,
      yearsOptions: [],
      provinceDataList: [],
      cityDataList: [],
      districtDataList: [],
      form: {
        industryType: 1,
        industry: false,
        technicalFieldArray: [],
        technicalSourceArray: [],
        technicalFormArray: [],
        projectTime: "",
        id: undefined,
        entId: undefined,
        projectOwner: 2,
        projectStartDate: '',
        projectEndDate: '',
        headAddVOList: [],
        projectYear: '',
        projectDate: '',
        projectName: '',
        projectType: '',
        projectTime: '',
        developFlag: true
      },
      rules: {
        projectYear: [
          { required: true, trigger: "change", message: "请选择加计扣除年度" }
        ],
        developFlag: [
          { required: true, trigger: "change", message: "请选择研发成果" }
        ],
        projectName: [
          { required: true, trigger: "blur", message: "请填写项目名称" }
        ],
        projectDate: [
          { required: true, trigger: "[blur,change]", message: "请选择立项时间" }
        ],
        projectTime: [
          { required: true, trigger: "[blur,change]", message: "请选择起止时间" }
        ],
        projectType: [
          { required: true, trigger: "change", message: "请选择项目类型" }
        ],
        industry: [
          { required: true, trigger: "change", message: "请选择战略新兴产业" }
        ],
        industryType: [
          { required: true, trigger: "change", message: "请选择所属新兴产业领域" }
        ],
      },
      loading: false,
      captchaOnOff: true
    };
  },

  created() {
    this.$nextTick(() => {
    	this.$refs.form.clearValidate()
    })
    this.form.id = this.$route.query.id || undefined;
    this.form.entId = this.$route.query.entId || undefined;
    this.getYears()
    //如果是财务、科技
    if(this.roleTypeFlag) {
      this.disabledVisible = true
    }else {
      this.disabledVisible = false
    }
    if(this.type == 'view') {
      this.disabledVisible = true
    }

  },
  methods: {
    delProcess(index) {
      this.form.headAddVOList.splice(index, 1)
    },
    getYears(){
      let optionsArray = new Array();
      let years= new Date().getFullYear();
      for(var i=years;i>=years-9;i--){
        let anOption = {};
        anOption.dictValue=i;
        anOption.dictLabel=i;
        optionsArray.push(anOption);
      }
      this.yearsOptions = optionsArray;
    },
    addFunc() {
      this.form.headAddVOList.push({
        name: "",
        sex: "",
        idNumber: "",
        age: "",
        education: "",
        major: "",
        currentMajor: "",
        jobTitle: "",
        dept: "",
        responsibilities: "",
        contactNumber: ""
      })
    },
    getLayDate(){
      let _self = this
      laydate.render({
        elem: '#projectTime', // 输入框的id属性，用来绑定到dom
        type: 'date',
        range: true,
        done: (value) => {
          _self.form.projectTime = value; // 将选中的值赋给组件中的变量
        }
      })
    },
    handleSuccess(file) {
      this.$refs.techLicenseUpload.clearValidate()
      this.form.techLicense = file.url;
      this.form.fileName = file.name;
    },
    cancel() {
      this.$store.dispatch("tagsView/delView", this.$route); // 关闭当前tab
      this.$router.go(-1);
    },
    //保存年度信息
    submitForm() {
      this.$refs.form.validate(valid => {
        if(valid) {
          this.loading = true
          this.form.technicalField = this.form.technicalFieldArray.join(',')
          this.form.technicalSource = this.form.technicalSourceArray.join(',')
          this.form.technicalForm = this.form.technicalFormArray.join(',')
          if(this.form.projectTime) {
            this.form.projectStartDate = this.form.projectTime.split('至')[0].trim()
            this.form.projectEndDate = this.form.projectTime.split('至')[1].trim()
          }else {
            this.form.projectStartDate = ''
            this.form.projectEndDate = ''
          }
          declareUpdateApi(this.form).then(res => {
            this.$alert('企业研发项目情况保存成功', '提示', {
              confirmButtonText: '确定',
              callback: action => {
                this.loading = false
                this.$store.dispatch("tagsView/delView", this.$route);
                this.$router.go(-1);
              }
            })
          })
        }
      })
    }
  },
  watch: {
    'tempVariable'(val) {
      if(val.invest && val.sales) {
        this.form.techRate = ((val.invest / val.sales)*100).toFixed(2)
      }
    },
    info: {
      immediate: true,
      handler (obj) {
        if(obj) {
          this.form = Object.assign({}, this.form, obj)
          // this.form.projectDate = infoObj.projectDate
          // this.form.projectType = infoObj.projectType + ''
          // this.form.projectYear = infoObj.projectYear
          // this.form.projectName = infoObj.projectName
          // this.form.developFlag = infoObj.developFlag
          // this.form.headAddVOList = infoObj.headAddVOList || []
          // this.form.industry = infoObj.industry
          this.form.fileName = '高新证书'
          // let arr = ['电子信息']
          // this.$set(this.form, 'techScopeArray', arr)

          if(obj.technicalField) {
            this.form.technicalFieldArray = obj.technicalField.split(',') || []
          }
          if(obj.technicalSource) {
            this.form.technicalSourceArray = obj.technicalSource.split(',') || []
          }
          if(obj.technicalForm) {
            this.form.technicalFormArray = obj.technicalForm.split(',') || []
          }
          if(obj.projectStartDate && obj.projectEndDate) {
            this.form.projectTime = obj.projectStartDate + ' 至 ' + obj.projectEndDate
          }

        }
      }
    },
  }
};
</script>
