<!--
 * @Description: 流程审核中驳回时输入意见弹层
 * @Author: @liulin
 * @Date: 2023-03-29 15:00:11
 * @LastEditors: Do not edit
 * @LastEditTime: 2023-03-30 16:22:02
-->
<template>
  <el-dialog
    title="驳回信息"
    :visible.sync="visible"
    width="50%"
    top="10vh"
    :close-on-click-modal="false"
    append-to-body
  >
    <el-form
      ref="form"
      :model="tableData"
      :rules="rules"
      label-width="80px"
      label-position="top"
    >
      <el-table :data="tableData.data" border style="width: 100%">
        <el-table-column align="center" width="50">
          <template #header>
            <i class="el-icon-plus add-btn" @click="addResult" />
          </template>
          <template v-slot="{$index}">
            <i
              class="el-icon-delete del-btn"
              @click="deleteDate($index)"
              v-show="tableData.data.length > 1"
            />
          </template>
        </el-table-column>
        <el-table-column label="驳回原因" align="center" width="200">
          <template v-slot="{row, $index}">
            <!-- multiple -->
            <el-form-item
              :prop="'data.' + $index + '.type'"
              :rules="rules.type"
            >
              <el-select
                v-model="row.type"
                @change="setInputShow($event, $index)"
                placeholder="请选择驳回理由..."
                style="width: 100%"
                clearable
              >
                <el-option
                  v-for="item in bhyyList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                  style="width: 100%"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="详细描述" align="center" min-width="180">
          <template v-slot="{row, $index}">
            <el-form-item
              :prop="'data.' + $index + '.detail'"
              :rules="row.type == '其他' ? rules.detail : [{required: false}]"
            >
              <el-input
                type="textarea"
                placeholder="请输入详细驳回原因..."
                maxlength="150"
                autosize
                v-model="row.detail"
              ></el-input>
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="danger" @click="handleOverrule"> 驳回 </el-button>
      <el-button @click="close">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'RejectInfoDialog',
  data() {
    return {
      visible: false,
      approvalComments: [],
      bhyyList: [],
      inptShow: false,
      text: '',
      api: '',
      status: '',
      form: {},
      rules: {
        type: {
          required: true,
          message: '请选择驳回理由',
          trigger: 'change'
        },
        detail: {
          required: true,
          message: '请输入详细驳回原因',
          trigger: 'blur'
        }
      },
      tableData: {
        data: [{type: '', detail: ''}]
      },
      changeIndex: -1
    }
  },
  created() {
    let data = JSON.parse(sessionStorage.getItem('dict_data'))
    this.bhyyList = data.bhyy
  },
  methods: {
    open(api, status) {
      this.api = api
      this.status = status
      this.form = {}
      this.inptShow = false
      this.visible = true
    },
    close() {
      this.visible = false
      // this.$emit('sendRejectInfo', '')
      this.tableData.data = [{type: '', detail: ''}]
      this.changeIndex = -1
      this.$refs.form.resetFields()
    },
    setInputShow(e, index) {
      if (index != this.changeIndex && e) {
        this.tableData.data.push({type: '', detail: ''})
        this.changeIndex = index
      }
      //   this.inptShow = e.indexOf('其他') === -1 ? false : true
    },
    handleOverrule() {
      //   let len = this.tableData.data.length
      //   if (len > 1) {
      let arr = this.tableData.data.filter(item => item.type !== '')
      this.$set(this.tableData, 'data', arr)
      this.$nextTick(() => {
        this.$refs.form.validate(valid => {
          if (valid) {
            let arr = this.tableData.data.map(
              item => `${item.type}:${item.detail}`
            )
            let approvalComments = arr.join('$_$')
            this.$emit(
              'sendRejectInfo',
              approvalComments,
              this.api,
              this.status
            )
            this.close()
          }
        })
      })

      //   } else {
      //     this.$refs.form.validate(valid => {
      //       if (valid) {
      //         let arr = this.tableData.data.map(
      //           item => `${item.type}:${item.detail}`
      //         )
      //         let approvalComments = arr.join('$_$')
      //         this.$emit('sendRejectInfo', approvalComments, this.api, this.status)
      //         this.close()
      //       }
      //     })
      //   }

      //   this.$refs.form.validate(valid => {
      //     if (valid) {
      //       let {approvalComments, text} = this.form
      //       if (text) {
      //         approvalComments = approvalComments.filter(item => item !== '其他')
      //         text = '其他:' + text
      //         approvalComments.push(text)
      //       }
      //       approvalComments = approvalComments.join('$_$') // 这不能改,否则将会影响其他页面回显
      //       this.$emit('sendRejectInfo', approvalComments, this.api, this.status)
      //       this.visible = false
      //     }
      //   })
    },
    addResult() {
        this.tableData.data.push({type: '', detail: ''})
    },
    deleteDate(index) {
      this.tableData.data.splice(index, 1)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/assets/css/element-variables.scss';
.add-btn {
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  color: $--color-primary;
}

.del-btn {
  font-size: 18px;
  font-weight: bold;
  color: $--color-danger;
  cursor: pointer;
}
</style>
