<template>

  <el-dialog

    :modal-append-to-body="false"

    :append-to-body="true"

    :title="title"

    :visible.sync="addRequireVisible"

    width="1300px"

    show-close

  >

    <el-form :rules="requireRuleForm" ref="requireRef" :model="requireForm" label-width="180px">

      <el-row>

        <el-col :span="12">

          <el-form-item label="模型编码：" prop="modelId">

            <el-input style="width: 100%" v-model="requireForm.modelId" />

          </el-form-item>

        </el-col>

        <el-col :span="12">

          <el-form-item label="模型名称：" prop="modelName">

            <el-input style="width: 100%" v-model="requireForm.modelName" />

          </el-form-item>

        </el-col>

        <el-col :span="12">

          <el-form-item label="口径：" prop="koujing">

            <el-input

              :clearable="true"

              @input="forceUpdate($event)"

              style="width: 100%"

              v-model="requireForm.koujing"

              placeholder="请输入"

            />

          </el-form-item>

        </el-col>

        <el-col :span="12">

          <el-form-item label="风险点：" prop="fengxiandian">

            <el-input

              :clearable="true"

              @input="forceUpdate($event)"

              style="width: 100%"

              v-model="requireForm.fengxiandian"

              placeholder="请输入"

            />

          </el-form-item>

        </el-col>

        <el-col :span="12">

          <el-form-item label="数据周期：" prop="dataCycle">

            <el-select

              :clearable="true"

              @change="forceUpdate($event)"

              style="width: 100%"

              v-model="requireForm.dataCycle"

              placeholder="请选择"

            >

              <el-option v-for="(el, i) in dataCycleOpt" :key="i" :value="el.value" :label="el.name" />

            </el-select>

          </el-form-item>

        </el-col>

        <el-col :span="12">

          <el-form-item label="模型所需工作量" prop="gongzuoliang">

            <el-input

              :clearable="true"

              @input="forceUpdate($event)"

              style="width: 90%"

              v-model="requireForm.gongzuoliang"

              placeholder="请输入"

            />

            <span style="margin-left: 6px">人日</span>

          </el-form-item>

        </el-col>

        <el-col :span="12">

          <el-form-item label="模型负责人：" prop="fuzeren">

            <el-select

              :clearable="true"

              @change="forceUpdate($event)"

              style="width: 100%"

              v-model="requireForm.fuzeren"

              placeholder="请选择"

            >

              <el-option v-for="(el, i) in fuzerenOpt" :key="i" :value="el.value" :label="el.name" />

            </el-select>

          </el-form-item>

        </el-col>

        <el-col :span="12">

          <el-form-item label="审批人：" prop="shenpiren">

            <el-select

              :clearable="true"

              @change="forceUpdate($event)"

              style="width: 100%"

              v-model="requireForm.shenpiren"

              placeholder="请选择"

            >

              <el-option v-for="(el, i) in shenpirenOpt" :key="i" :value="el.value" :label="el.name" />

            </el-select>

          </el-form-item>

        </el-col>

        <el-col :span="12">

          <el-form-item label="结果表名称：" prop="resultTableName">

            <el-input

              :clearable="true"

              @input="forceUpdate($event)"

              :autosize="{ minRows: 2, maxRows: 2 }"

              type="textarea"

              style="width: 100%"

              v-model="requireForm.resultTableName"

              placeholder="请输入"

            />

          </el-form-item>

        </el-col>

        <el-col :span="12">

          <el-form-item label="结果表字段：" prop="resultTableColumn">

            <el-input

              :clearable="true"

              @input="forceUpdate($event)"

              :autosize="{ minRows: 2, maxRows: 2 }"

              type="textarea"

              style="width: 100%"

              v-model="requireForm.resultTableColumn"

              placeholder="请输入"

            />

          </el-form-item>

        </el-col>

        <el-col :span="12">

          <el-form-item label="数据开发人员：" prop="dataDeveloper">

            <el-select

              :clearable="true"

              @change="forceUpdate($event)"

              style="width: 100%"

              v-model="requireForm.dataDeveloper"

              placeholder="请选择"

            >

              <el-option v-for="(el, i) in dataDeveloperOpt" :key="i" :value="el.value" :label="el.name" />

            </el-select>

          </el-form-item>

        </el-col>

        <el-col :span="12">

          <el-form-item label="是否涉及接口表：" prop="IsJiekouTable">

            <el-radio-group v-model="requireForm.IsJiekouTable">

              <el-radio label="0">涉及</el-radio>

              <el-radio label="1">不涉及</el-radio>

            </el-radio-group>

          </el-form-item>

        </el-col>

        <el-col :span="24" v-if="requireForm.IsJiekouTable == 0">

          <el-form-item label="涉及接口表信息：" prop="interfaceTableInfo">

            <el-form :model="formData" ref="data" label-width="auto">

              <el-table

                border

                :header-cell-style="{ 'text-align': 'center' }"

                :cell-style="{ 'text-align': 'center' }"

                :data="formData.tableData"

                ref="table"

                style="width: 100%"

              >

                ​

                <el-table-column align="center" prop="sourceSysName" label="来源系统名">

                  <template slot-scope="scope">

                    <!--表格里面嵌套表单-->

                    <el-form-item

                      :prop="scope.$index + '.sourceSysName'"

                      :rules="{ required: true, message: '来源系统名不能为空', trigger: 'blur' }"

                    >

                      <el-select

                        :clearable="true"

                        @change="forceUpdate($event)"

                        style="width: 100%"

                        v-model="scope.row.sourceSysName"

                        placeholder="请选择"

                      >

                        <el-option v-for="(el, i) in sourceSysNameOpt" :key="i" :value="el.value" :label="el.name" />

                      </el-select>

                    </el-form-item>

                  </template> </el-table-column

                >​

                <el-table-column align="center" prop="dataTabName" label="数据表名">

                  <template slot-scope="scope">

                    <!--表格里面嵌套表单-->

                    <el-form-item

                      :prop="scope.$index + '.dataTabName'"

                      :rules="{ required: true, message: '数据表名不能为空', trigger: 'blur' }"

                    >

                      <el-input

                        v-model="scope.row.dataTabName"

                        autocomplete="off"

                        :autosize="{ minRows: 2, maxRows: 2 }"

                        type="textarea"

                        size="small"

                        placeholder="数据表名"

                      ></el-input>

                    </el-form-item>

                  </template> </el-table-column

                >​

                <el-table-column align="center" prop="dataTransferCycle" label="数据传输周期">

                  <template slot-scope="scope">

                    <!--表格里面嵌套表单-->

                    <el-form-item

                      :prop="scope.$index + '.dataTransferCycle'"

                      :rules="{ required: true, message: '数据传输周期不能为空', trigger: 'blur' }"

                    >

                      <el-select

                        :clearable="true"

                        @change="forceUpdate($event)"

                        style="width: 100%"

                        v-model="scope.row.dataTransferCycle"

                        placeholder="请选择"

                      >

                        <el-option

                          v-for="(el, i) in dataTransferCycleOpt"

                          :key="i"

                          :value="el.value"

                          :label="el.name"

                        />

                      </el-select>

                    </el-form-item>

                  </template> </el-table-column

                >​

                <el-table-column align="center" prop="sysAdmin" label="系统管理员">

                  <template slot-scope="scope">

                    <!--表格里面嵌套表单-->

                    <el-form-item

                      :prop="scope.$index + '.sysAdmin'"

                      :rules="{ required: true, message: '系统管理员不能为空', trigger: 'blur' }"

                    >

                      <el-input

                        v-model="scope.row.sysAdmin"

                        autocomplete="off"

                        :autosize="{ minRows: 2, maxRows: 2 }"

                        type="textarea"

                        size="small"

                        placeholder="系统管理员"

                      ></el-input>

                    </el-form-item>

                  </template> </el-table-column

                >​

                <el-table-column align="center" prop="jishuyuan" label="技术员">

                  <template slot-scope="scope">

                    <!--表格里面嵌套表单-->

                    <el-form-item

                      :prop="scope.$index + '.jishuyuan'"

                      :rules="{ required: true, message: '技术员不能为空', trigger: 'blur' }"

                    >

                      <el-input

                        v-model="scope.row.jishuyuan"

                        autocomplete="off"

                        :autosize="{ minRows: 2, maxRows: 2 }"

                        type="textarea"

                        size="small"

                        placeholder="技术员"

                      ></el-input>

                    </el-form-item>

                  </template> </el-table-column

                >​

                <el-table-column align="center" prop="laiyuanshujukoujing" label="来源数据口径">

                  <template slot-scope="scope">

                    <!--表格里面嵌套表单-->

                    <el-form-item

                      :prop="scope.$index + '.laiyuanshujukoujing'"

                      :rules="{ required: true, message: '来源数据口径不能为空', trigger: 'blur' }"

                    >

                      <el-input

                        v-model="scope.row.laiyuanshujukoujing"

                        autocomplete="off"

                        :autosize="{ minRows: 2, maxRows: 2 }"

                        type="textarea"

                        size="small"

                        placeholder="技术员"

                      ></el-input>

                    </el-form-item>

                  </template> </el-table-column

                >​

                <el-table-column label="操作" resizable align="center" header-align="center" width="80">

                  <template slot-scope="{ $index }">

                    <el-button

                      type="primary"

                      icon="el-icon-plus"

                      circle

                      @click="addRow()"

                      v-if="$index == 0"

                    ></el-button>

                    <el-button icon="el-icon-minus" circle @click="delRow($index)" v-if="$index > 0"></el-button>

                  </template>

                </el-table-column>

              </el-table>

            </el-form>

            <i

              class="el-icon-circle-plus-outline"

              style="font-size: 20px; color: #1890ff; margin-top: 10px"

              @click="addRow"

            ></i>

          </el-form-item>

        </el-col>

        <el-col :span="24">

          <el-form-item label="附件上传：" prop="fujian">

            <el-upload

              action

              :on-change="onChange"

              :on-remove="handleRemove"

              :file-list="requireForm.fileList"

              :auto-upload="false"

              v-if="!isSee"

            >

              <el-button plain size="small" type="primary">点击上传</el-button>

              <span style="margin-left: 6px">只能上传docx/xlsx文件，且不超过1000kb</span>

            </el-upload>

          </el-form-item>

        </el-col>

      </el-row>

    </el-form>

    <span slot="footer">

      <el-button @click="addRequireVisible = false">取 消</el-button>

      <el-button type="primary" @click="onSubmit" :loading="confirmLoading">确 定</el-button>

    </span>

  </el-dialog>

</template>

<script>

import { addProjectProblems, getCategoryListByCodes, updateProjectProblems } from '@/api/projectManage.js'

import moment from 'moment'

export default {

  name: 'AddRequire',

  components: {},

  data() {

    let validateMoney = (rule, value, callback) => {

      if (0 != Number(value) && !Number(value)) {

        return callback(new Error(rule.message))

      } else {

        callback()

      }

    }

    return {

      riskLevelOpt: [],

      rectWayOpt: [],

      requireRuleForm: {

        requireName: [{ required: true, message: '请输入需求名称' }],

        modelName: [{ required: true, message: '请输入模型名称' }],

        koujing: [{ required: true, message: '请输入口径' }],

        fengxiandian: [{ required: true, message: '请输入风险点' }],

        dataCycle: [{ required: true, message: '请选择数据周期' }],

        gongzuoliang: [{ required: true, message: '请输入模型所需工作量' }],

        fuzeren: [{ required: true, message: '请输入模型负责人' }],

        shenpiren: [{ required: true, message: '请输入审批人' }],

        resultTableName: [{ required: true, message: '请输入结果表名称' }],

        resultTableColumn: [{ required: true, message: '请输入结果名字段' }],

        dataDeveloper: [{ required: true, message: '请选择数据开发人员' }],

        IsJiekouTable: [{ required: true, message: '请选择是否涉及接口表' }],

      },

      requireForm: {

        requireId: '',

        requireName: '',

        modelId: '',

        modelName: '',

        koujing: '',

        fengxiandian: '',

        dataCycle: undefined,

        fuzeren: undefined,

        shenpiren: '',

        resultTableName: '',

        resultTableColumn: '',

        dataDeveloper: '',

        IsJiekouTable: 1,

        fileList: [],

      },

      interfaceTableInfo: [],

      title: '新增需求',

      addRequireVisible: false,

      isEdit: false,

      confirmLoading: false,

      dataDeveloperOpt: [

        {

          name: '张三',

          value: 1,

        },

        {

          name: '李四',

          value: 2,

        },

        {

          name: '王五',

          value: 3,

        },

      ],

      dataCycleOpt: [

        {

          name: '日',

          value: 11,

        },

        {

          name: '周',

          value: 12,

        },

        {

          name: '半年',

          value: 13,

        },

        {

          name: '年',

          value: 14,

        },

      ],

      fuzerenOpt: [

        {

          name: '张三',

          value: 1,

        },

        {

          name: '李四',

          value: 2,

        },

        {

          name: '王五',

          value: 3,

        },

      ],

      shenpirenOpt: [

        {

          name: '张三',

          value: 1,

        },

        {

          name: '李四',

          value: 2,

        },

        {

          name: '王五',

          value: 3,

        },

      ],

      sourceSysNameOpt: [

        {

          name: '划小系统',

          value: 1,

        },

        {

          name: '沙盘系统',

          value: 2,

        },

      ],

      dataTransferCycleOpt: [

        {

          name: '每小时',

          value: 1,

        },

        {

          name: '每天',

          value: 2,

        },

        {

          name: '每周',

          value: 2,

        },

      ],

      isSee: false,

      formData: {

        tableData: [

          {

            sourceSysName: '',

            dataTabName: '',

          },

        ],

      },

    }

  },

  mounted() {

    // 风险程度

    getCategoryListByCodes({ categoryCodes: 'zgxh_risk_level' }).then((res) => {

      this.riskLevelOpt = (res.result.zgxhRiskLevel || []).map((item) => ({

        ...item,

        value: item.codeLowercase,

        name: item.nameLowercase,

      }))

    })

    //  整改方式

    getCategoryListByCodes({ categoryCodes: 'zgxh_rect_way' }).then((res) => {

      this.rectWayOpt = (res.result.zgxhRectWay || []).map((item) => ({

        ...item,

        value: item.codeLowercase,

        name: item.nameLowercase,

      }))

    })

  },

  methods: {

    forceUpdate(e) {

      this.$forceUpdate()

    },

    showInit(row) {

      if (row.requireId) {

        this.isEdit = true

        this.title = '编辑需求'

        this.requireForm = {

          requireId: row.required,

          requireName: row.requireName,

          modelId: row.modelId,

          modelName: row.modelName,

          koujing: row.koujing,

          fengxiandian: row.fengxiandian,

          dataCycle: row.dataCycle,

          fuzeren: row.fuzeren,

          gongzuoliang: row.gongzuoliang,

          shenpiren: row.shenpiren,

          resultTableName: row.resultTableName,

          resultTableColumn: row.resultTableColumn,

          dataDeveloper: row.dataDeveloper,

          IsJiekouTable: 1,

        }

      } else {

        this.isEdit = false

        this.title = '新增需求'

        this.$nextTick(() => {

           this.requireForm = {

            // requireId: 'DM231572',

            // requireName: '',

            // modelId: 'MD05612',

            // modelName: '',

            // koujing: '',

            // fengxiandian: '',

            // dataCycle: '',

            // fuzeren: '',

            // gongzuoliang: '',

            // shenpiren: '',

            // resultTableName: '',

            // resultTableColumn: '',

            // dataDeveloper: '',

            // IsJiekouTable: null,

          }

          // this.$refs.requireRef.resetFields()

        })

      }

      this.addRequireVisible = true

    },

    addRow() {

      let newArr = [

        {

          sourceSysName: '',

          dataTabName: '',

          dataTransferCycle: '',

          sysAdmin: '',

          jishuyuan: '',

          laiyuanshujukoujing: '',

        },

      ]

      this.formData.tableData.push(...newArr)

    },

    delRow(index) {

      this.formData.tableData.splice(index, 1)

    },

    handleRemove(file) {

      const index = this.requireForm.fileList.indexOf(file)

      const newFileList = this.requireForm.fileList.slice()

      newFileList.splice(index, 1)

      this.requireForm.fileList = newFileList

    },

    onChange(file) {

      console.log(this.requireForm.fileList)

      this.requireForm.fileList.push(file)

    },

    onSubmit() {

      this.$refs.requireRef.validate((valid) => {

        if (valid) {

          this.confirmLoading = true

          if (!this.isEdit) {

            addProjectProblems({ ...this.requireForm }).then((res) => {

              if (res.success) {

                this.$message.success('操作成功')

                this.addRequireVisible = false

                this.$emit('refreshList')

              } else {

                this.$message.error(res.message)

              }

              this.confirmLoading = false

            })

          } else {

            updateProjectProblems({ ...this.requireForm }).then((res) => {

              if (res.success) {

                this.$message.success('操作成功')

                this.addRequireVisible = false

                this.$emit('refreshList')

              } else {

                this.$message.error(res.message)

              }

              this.confirmLoading = false

            })

          }

        } else {

          return false

        }

      })

    },

  },

}

</script>

<style lang="less">

@import '~@assets/less/common.less';

</style>

<style scoped lang="less">

/deep/.el-form-item--mini.el-form-item {

  margin-bottom: 20px;

}

/deep/.el-dialog__body {

  padding-right: 40px;

}

/deep/ .el-dialog {

  max-height: unset;

}

</style>