<template>
  <div>
    <div v-if="type == 1">
      <!-- 单个后续事项 -->
      <el-form :model="formData[0]" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="名称" prop="name">
          <el-input v-model="formData[0].name" autocomplete="off" placeholder="请输入后续跟进事项名称"></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input type="textarea" :rows="1" v-model="formData[0].description" autocomplete="off"
            placeholder="请输入后续跟进事项描述"></el-input>
        </el-form-item>
        <el-form-item label="处理人" prop="handler">
          <el-input v-model="formData[0].handler" placeholder="请输入后续跟进事项处理人"></el-input>
        </el-form-item>
        <el-form-item label="协办人" prop="synery">
          <el-input v-model="formData[0].synery" placeholder="请输入后续跟进事项协办人"></el-input>
        </el-form-item>
        <el-form-item label="期限" prop="deadline">
          <el-date-picker style="width: 100%" v-model="formData[0].deadline" type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <div style="display:flex;justify-content:center"
            v-if="formData[0].status != '已完成' && $reportPermission(projectId, [0, 1])">
            <el-button type="primary" @click="submitForm()" size="small" style="width:100px"
              :loading="btnLoading">保存</el-button>
            <el-button @click="resetForm()" size="small" style="width:100px">取消</el-button>
          </div>

        </el-form-item>
      </el-form>
    </div>
    <div v-else :class="projectId ? 'item1' : 'item2'">
      <!-- 多个后续事项 -->
      <el-table :data="formData" style="width: 100%" class="twj-table">
        <el-table-column prop="name" label="名称" align="center" min-width="150px">
          <template slot="header">
            <div>
              <span>名称<span style="color:red;"> *</span></span>
            </div>
          </template>
          <template slot-scope="scope">
            <div>
              <el-input v-model="scope.row.name" autocomplete="off" placeholder="请输入名称"></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="description" label="描述" align="center" width="250px">
          <template slot-scope="scope">
            <div>
              <el-input type="textarea" :rows="1" v-model="scope.row.description" autocomplete="off"
                placeholder="请输入描述"></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="handler" label="处理人" align="center" min-width="150px">
          <template slot-scope="scope">
            <div>
              <el-input v-model="scope.row.handler" placeholder="请输入处理人"></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="synery" label="协办人" align="center" min-width="150px">
          <template slot-scope="scope">
            <div>
              <el-input v-model="scope.row.synery" placeholder="请输入协办人"></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="deadline" label="期限" align="center" min-width="150px">
          <template slot-scope="scope">
            <div>
              <el-date-picker style="width: 100%" v-model="scope.row.deadline" type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间">
              </el-date-picker>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="100px">
          <template slot-scope="scope">
            <div>
              <i @click="addRow(scope)" class="el-icon-plus btn"></i>
              <i @click="deleteRow(scope)" v-if="scope.$index != 0" class="el-icon-close btn"></i>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div style="display:flex;justify-content: center;margin-top:20px"
        v-if="projectId && (sign != false && sign != true)">
        <el-button type="primary" @click="submitForm1()" size="small" style="width:100px"
          :loading="btnLoading">保存</el-button>
        <el-button size="small" @click="resetForm()" style="width:100px">取消</el-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ["type", "projectId", 'sign', 'row'],
  data() {
    return {
      // 保存按鈕的loading
      btnLoading: false,
      // 后续事项的数据
      formData: [
        {
          projectId: this.projectId,
          name: '',
          description: '',
          handler: '',
          synery: '',
          deadline: ''
        }
      ],
      // 后续事项的校验规则
      rules: {
        name: [{ required: true, message: '请输入后续跟进事项名称', trigger: "blur", },],
      },
    };
  },
  watch: {
    type() {
      this.getType()
    },
    sign(val) {
      if (val) {
        this.$emit('value', this.formData)
      }
    },
  },
  mounted() {
    this.getType()
  },
  methods: {
    emitData(){
      return this.validMatter()
    },
    //获取type类型
    getType() {
      if (this.row) {
        this.formData = [this.row]
        return false
      }
      if (this.type == 2) {
        for (var i = 0; i < 2; i++) {
          this.formData.push(
            {
              projectId: this.projectId,
              name: '',
              description: '',
              handler: '',
              synery: '',
              deadline: ''
            }
          )
        }
      } else {
        this.formData = [
          {
            projectId: this.projectId,
            name: '',
            description: '',
            handler: '',
            synery: '',
            deadline: ''
          }
        ]
      }
    },
    //添加后续跟进事项
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.btnLoading = true
          if (this.row) {
            this.$api.updateFollowUp(this.formData).then(response => {
              if (response.code == 200) {
                this.btnLoading = false
                this.$message.success('后续跟进事项更新成功')
                this.resetForm()
              }
            }).catch(error => {
              this.btnLoading = false
              this.$message.error('后续跟进事项更新失败')
            })
          } else {
            this.$api.addFollowUp(this.formData).then(response => {
              if (response.code == 200) {
                this.btnLoading = false
                this.$message.success('后续跟进事项添加成功')
                this.resetForm()
              }
            }).catch(error => {
              this.btnLoading = false
              this.$message.error('后续跟进事项添加失败')
            })
          }

        } else {
          return false;
        }
      });
    },
    validMatter(){
      try {
        var list = []
        var b = false
        var keyList = {
          name: '',
          description: '',
          handler: '',
          synery: '',
          deadline: ''
        }
        this.formData.forEach(item => {
          var a = false
          for (let key in keyList) {
            if (item[key] != '' && item[key] != null) {
              a = true
            }
          }
          if (a == true) {
            if (item.name != '') {
              b = true
              list.push(item)
            } else {
              b = false
              throw new Error()
            }
          }
        })
        return list
      } catch (e) {
        this.$message.error('后续跟进事项名称不能为空')
        return false
      }
    },
    submitForm1() {
      var list = this.validMatter()
      if(list){
        this.$api.addFollowUp(list).then(response => {
          if (response.code == 200) {
            this.btnLoading = false
            this.$message.success('后续跟进事项添加成功')
            this.resetForm()
          }
        }).catch(error => {
          this.btnLoading = false
          this.$message.error('后续跟进事项添加失败')
        })
      }

    },
    //取消
    resetForm() {
      if (this.type == 1) {
        this.$refs.ruleForm.resetFields();
      }
      this.formData = [
        {
          name: '',
          description: '',
          handler: '',
          synery: '',
          deadline: ''
        }
      ]
      this.$emit('dialog', false)

    },
    //添加跟进事项
    addRow() {
      this.formData.push(
        {
          projectId: this.projectId,
          name: '',
          description: '',
          handler: '',
          synery: '',
          deadline: ''
        }
      )
    },
    //删除跟进事项
    deleteRow(row) {
      this.formData.splice(row.$index, 1)
    },
  },
};
</script>
<style>
.twj-table td.el-table__cell,
.twj-table th.el-table__cell.is-leaf {
  border: none
}

.twj-table::before {
  background-color: transparent;
}
</style>
<style lang="scss" scoped>
.item1 {
  max-height: 500px;
  overflow: auto;
}

.item2 {
  max-height: 350px;
  overflow: auto;
}

.btn {
  color: black;
  margin-left: 10px;
  font-size: 18px;
  text-align: center;
  cursor: pointer;
}

.btn:hover {
  color: aqua;
}
</style>