<template>
  <div>
    <el-row>
      <!--查询-->
      <el-col :span="24">
        <Form inline onsubmit="return false" :label-width="90">
          <Form-item class="search-item" label="问题:">
            <el-input v-model="formObj.question" placeholder="请输入问题" @keyup.enter.native="_formSearch" />
          </Form-item>
          <Form-item class="search-btn">
            <Button type="primary" @click="_formSearch">
              搜索
            </Button>
          </Form-item>
        </Form>
      </el-col>
      <!--操作-->
      <el-col :span="24">
        <btn-list :msg="btn" @on-result-change="_btnClick" />
      </el-col>
      <!-- 表格 -->
      <el-col :span="24">
        <element-table
          ref="pageTable"
          :table-height="300"
          :get-page="getPage"
          show-check-box
          select-data
          :icon-msg="iconMsg"
          opt-col-width="100"
          @on-result-change="_tableResultChange"
        >
          <el-table-column
            v-for="item in pageColumns"
            :key="item.key"
            show-overflow-tooltip
            sortable
            :prop="item.key"
            :label="item.title"
            :min-width="item.width"
            :fixed="item.fixed?item.fixed:undefined"
          >
            <template slot-scope="scope">
              <div v-if="item.key==='status'">
                <div v-if="scope.row.status===0" class="green-color">
                  草稿
                </div>
                <div v-else class="blue-color">
                  已提交
                </div>
              </div>
              <div v-else-if="item.datetime">
                {{ scope.row[item.key]?$dateformat(scope.row[item.key],'yyyy-mm-dd HH:MM:ss'):'' }}
              </div>
              <div v-else-if="item.html" v-html="scope.row[item.key]" />
              <div v-else>
                {{ scope.row[item.key] }}
              </div>
            </template>
          </el-table-column>
        </element-table>
      </el-col>
    </el-row>
    <!-- 添加、编辑、复制 -->
    <frameUnconformMeasureEdit ref="editModal" @on-result-change="_formSearch" />
  </div>
</template>
<script>
import { frameUnconformImprove } from '../../../../api'
import global from '../../../../api/config'
import frameUnconformMeasureEdit from './frameUnconformMeasureEdit'

export default {
  components: {
    frameUnconformMeasureEdit
  },
  data() {
    return {
      selectIds: [],
      selectData: [],
      formObj: {
        question: ''
      },
      btn: [
        { type: 'success', id: '', name: '添加' },
        { type: 'success', id: '', name: '复制' },
        { type: 'error', id: '', name: '批量删除' },
        { type: 'primary', id: '', name: '提交' },
        { type: '', id: '', name: '导出' }
      ],
      iconMsg: [
        { type: 'pt-edit', id: '', name: '编辑' },
        { type: 'pt-trash', id: '', name: '删除' }
      ],
      getPage: {},
      pageColumns: [
        { title: '状态', key: 'status', width: 160 },
        { title: '问题', key: 'question', width: 160, html: true },
        { title: '预防/纠正措施', key: 'method', width: 160, html: true },
        { title: '截止日期', key: 'expiryDate  ', width: 160, datetime: true },
        { title: '编制人', key: 'applyName', width: 160 },
        { title: '编制日期', key: 'applyTime', width: 160, datetime: true },
        { title: '负责人', key: 'managerName', width: 160 },
        { title: '检查人', key: 'checkerName  ', width: 160 },
        { title: '备注', key: 'remark', width: 160 }
      ]
    }
  },
  methods: {
    _open() {
      this._formSearch()
    },
    _formSearch() {
      this.$refs.pageTable._pageChange(1)
    },
    _page: async function() {
      Object.assign(this.formObj, this.$refs.pageTable._searchParams())
      const result = await frameUnconformImprove.page(
        this.$serializeForm(this.formObj)
      )
      if (result) {
        this.getPage = result
        this.$refs.pageTable._initTable()
      }
    },
    _tableResultChange(msg, data) {
      switch (msg) {
        case 'page':
          this._page()
          break
        case 'selectData':
          this.selectData = data
          this.selectIds = []
          for (let i = 0; i < data.length; i++) {
            this.selectIds.push(data[i].id)
          }
          break
        case 'iconClick':
          this._iconClick(data.name, data.rowData)
          break
      }
    },
    _iconClick(res, data) {
      switch (res) {
        case '编辑':
          this._editModal(data.id)
          break
        case '删除':
          this._deleteByIds([data.id])
          break
      }
    },
    _btnClick(msg, data) {
      switch (msg) {
        case '添加':
          this.$refs.editModal._open()
          break
        case '复制':
          if (this.selectIds.length !== 1) {
            this.$Message.warning('请选择一条数据！')
          } else {
            this._copy()
          }
          break
        case '批量删除':
          this._deleteSelected()
          break
        case '提交':
          this._submit()
          break
        case '导出':
          this._export()
          break
      }
    },
    _deleteByIds(ids, content) {
      this.$Modal.confirm({
        title: '提示',
        content: content || '确定删除该记录？',
        onOk: () => {
          this._deleteOk(ids)
        }
      })
    },
    _deleteSelected() {
      const dataList = this.selectData
      if (this.selectIds.length === 0) {
        this.$Message.warning('请选择一条或多条数据！')
      } else {
        for (let i = 0; i < dataList.length; i++) {
          if (dataList[i].status === 1) {
            this.$Message.error('不能删除已提交数据！')
            return
          }
        }
        this._deleteByIds(
          this.selectIds,
          '确定删除 ' + this.selectIds.length + ' 条记录？'
        )
      }
    },
    _deleteOk: async function(ids) {
      const result = await frameUnconformImprove.deleteByIds(ids)
      if (result) {
        this._page()
        this.$Message.success('删除成功！')
      }
    },
    _editModal: async function(id) {
      const result = await frameUnconformImprove.getById(id)
      this.$refs.editModal._open(result)
    },
    _submit() {
      if (this.selectIds.length === 0) {
        this.$Message.warning('请选择一条或多条数据！')
      } else {
        this.$Modal.confirm({
          title: '提示',
          content: '确定提交该记录？',
          onOk: () => {
            this._submitOk(this.selectIds)
          }
        })
      }
    },
    _submitOk: async function(ids) {
      const result = await frameUnconformImprove.submitByIds(ids)
      if (result) {
        this._page()
        this.$Message.success('提交成功！')
      }
    },
    _export() {
      let msg = ''
      if (this.selectIds.length === 0) {
        msg = '确定要导出所有数据？'
      } else {
        msg = '确定导出 ' + this.selectIds.length + ' 条记录？'
      }
      this.$Modal.confirm({
        title: '提示',
        content: msg,
        onOk: () => {
          window.open(
            global.baseURL +
              '/res/v1/frame_unconform_improve/export?ids=' +
              this.selectIds,
            '_blank'
          )
        }
      })
    },
    _copy: async function() {
      console.log(this.selectIds, 1111111)
      const result = await frameUnconformImprove.getById(this.selectIds)
      this.$refs.editModal._open(result, 'copy')
    }
  }
}
</script>
