<template>
  <div>
    <!--内容-->
    <div class="layout-content-padding">
      <div class="layout-content-main">
        <Row>
          <!--查询-->
          <Col span="24" style="margin-top: 20px" />
          <Form id="search-form" inline onsubmit="return false" :label-width="70">
            <label class="label-sign" />
            <Form-item class="search-item" label="培训名称:">
              <Input v-model="formObj.name" name="name" placeholder="请输入培训名称" @on-enter="_formSearch" />
            </Form-item>
            <Form-item class="search-btn">
              <Button type="primary" @click="_formSearch">
                搜索
              </Button>
            </Form-item>
          </Form>
          </Col>
          <!--操作-->
          <Col span="24" />
          <!--          <BtnList :msg="btn" class="contHide" @on-result-change="_btnClick" />-->
          <el-button type="success" style="margin-left: 5px;margin-bottom: 5px" @click="_add">
            添加
          </el-button>
          </Col>
          <Col span="24" />
          <element-table
            ref="pageTable"
            :page-columns="pageColumns"
            :table-height="tableHeight"
            :get-page="getPage"
            :opt-col-width="140"
            show-check-box
            select-data
            @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"
              :width="item.width"
              :min-width="200"
              :fixed="item.fixed?item.fixed:undefined"
            >
              <template slot-scope="scope">
                <div v-if="item.detail">
                  <a @click.stop="_detailModal(scope.row.id)">{{ scope.row[item.key] }}</a>
                </div>
                <div v-else-if="item.key==='type'">
                  {{ scope.row[item.key]===0?'对内':'对外' }}
                </div>
                <div v-else-if="item.date">
                  {{ scope.row[item.key]?$dateformat(scope.row[item.key],'yyyy-mm-dd'):'' }}
                </div>
                <div v-else-if="item.status">
                  <div v-if="scope.row.status===0" class="blue-color">
                    草稿
                  </div>
                  <div v-else-if="scope.row.status===10" class="green-color">
                    审批中
                  </div>
                  <div v-else-if="scope.row.status===12" class="red-color">
                    审批驳回
                  </div>
                  <div v-else-if="scope.row.status===1" class="green-color">
                    待实施
                  </div>
                </div>
                <div v-else>
                  {{ scope.row[item.key] }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              align="center"
              :width="150"
              fixed="right"
            >
              <template slot-scope="scope">
                <icon-list
                  :msg="scope.row['status'] === 0? iconMsg : iconMsgDis "
                  :row-data="scope.row"
                  @on-result-change="_iconClick"
                />
              </template>
            </el-table-column>
          </element-table>
          </Col>
        </Row>
      </div>
    </div>
    <!-- 添加、编辑 -->
    <LmsStaffTrainPlanEdit ref="editModal" @on-result-change="_formSearch" />
    <!-- 查看详情 -->
    <LmsStaffTrainPlanDetail ref="detailModal" />
    <!--历史记录-->
    <Record ref="record" />
  </div>
</template>
<script>
import { staffTrainPlan } from '../../../api'
import LmsStaffTrainPlanEdit from './LmsStaffTrainPlanEdit.vue'
import LmsStaffTrainPlanDetail from './LmsStaffTrainPlanDetail.vue'
import Record from './Record.vue'

export default {
  components: {
    LmsStaffTrainPlanEdit,
    LmsStaffTrainPlanDetail,
    Record
  },
  data() {
    return {
      btn: [
        { type: 'success', id: '', name: '添加' },
        { type: 'error', id: '', name: '删除' }
      ],
      iconMsg: [
        { type: 'pt-a-edit', id: '', name: '编辑' },
        { type: 'pt-a-trash', id: '', name: '删除' },
        { type: 'pt-a-submit', id: '', name: '提交' },
        { type: 'pt-a-clock', id: '', name: '历史记录' }
      ],
      formObj: {
        name: ''
      },
      iconMsgDis: [
        {
          type: 'pt-a-edit',
          id: '',
          name: '编辑',
          disabled: true
        },
        {
          type: 'pt-a-trash',
          id: '',
          name: '删除',
          disabled: true
        },
        { type: 'ios-copy', id: '', name: '复制' },
        { type: 'checkmark', id: '', name: '提交', disabled: true },
        { type: 'ios-clock', id: '', name: '历史记录' }
      ],
      selectIds: [],
      pageColumns: [
        { title: '状态', key: 'progress', width: 100, status: true },
        { title: '培训名称', key: 'name', width: 150, detail: true },
        { title: '培训类型', key: 'pxlx', width: 120 },
        { title: '负责人', key: 'chargerName', width: 160 },
        { title: '培训人员', key: 'staffNames', width: 150 },
        { title: '培训开始日期', key: 'beginDate', width: 140, date: true },
        { title: '培训结束日期', key: 'endDate', width: 140, date: true },
        // {title: '培训内容', key: 'trainContent', width: 200},
        { title: '培训目标', key: 'trainAim', width: 200 },
        { title: '考核办法', key: 'assessment', width: 120 },
        { title: '备注', key: 'remark', width: 120 },
        { title: '编制人', key: 'userName', width: 120 },
        { title: '编制时间', key: 'ltime', width: 120, date: true },
        { title: '审批人', key: 'approver', width: 120 },
        { title: '审批时间', key: 'approvDate', width: 120, date: true }
      ],
      getPage: {}
    }
  },
  computed: {
    tableHeight: function() {
      return '520'
    }
  },
  mounted() {
    this._page()
  },
  methods: {
    _iconClick(res, data) {
      switch (res) {
        case '编辑':
          this._editModal(true, data.id)
          break
        case '删除':
          this._deleteById(data.id)
          break
        case '复制':
          this._copyById(data.id, 'copy')
          break
        case '提交':
          this._submitById(data.id)
          break
        case '历史记录':
          this.$refs.record._open(data.id)
          break
      }
    },
    _page: async function() {
      Object.assign(this.formObj, this.$refs.pageTable._searchParams())
      const result = await staffTrainPlan.page(
        this.$serializeForm(this.formObj)
      )
      if (result) {
        this.getPage = result
        this.$refs.pageTable._initTable()
      }
    },
    _tableResultChange(msg, data) {
      switch (msg) {
        case 'selectData':
          this.selectData = data
          this.selectIds = this.selectData.map(({ id: i }) => i)
          break
        case 'iconClick':
          this._iconClick(data.name, data.rowData)
          break
        default:
          this._page()
      }
    },
    _formSearch() {
      this.$refs.pageTable._pageChange(1)
    },
    _copyById(id, msg) {
      // // 添加复制
      // this.$store.dispatch('LmsStaffTrainPlan/getById', id).then(() => {
      //   this.$refs.editModal._open(
      //     this.$store.state.LmsStaffTrainPlan.model,
      //     msg
      //   )
      // })
    },
    _submitById(id) {
      this.$Modal.confirm({
        title: '提示',
        content: '确定提交该记录？',
        onOk: () => {
          // this.$store.dispatch('LmsStaffTrainPlan/submitById', id).then(() => {
          //   if (this.$store.state.LmsStaffTrainPlan.success) {
          //     this._page()
          //     this.$Message.success('提交成功！')
          //   }
          // })
          this._submit(id)
        }
      })
    },

    _submit: async function(id) {
      const result = await staffTrainPlan.submitById(id)
      if (result) {
        this._page()
        this.$Message.success('提交成功！')
      }
    },

    _deleteByIds(ids, content) {
      this.$Modal.confirm({
        title: '提示',
        content: content || '确定删除该记录？',
        onOk: () => {
          // this.$store
          //   .dispatch('LmsStaffTrainPlan/deleteByIds', ids)
          //   .then(() => {
          //     if (this.$store.state.LmsStaffTrainPlan.success) {
          //       this._page()
          //       this.$Message.success('删除成功！')
          //     }
          //   })
        }
      })
    },
    _deleteById(id) {
      // 删除一条记录
      this._deleteByIds([id])
    },
    _deleteSelected() {
      // 批量删除
      const ids = this.selectIds
      if (ids === '') {
        this.$Message.warning('请选择一条或多条数据！')
      } else {
        this._deleteByIds(ids, '确定删除 ' + ids.length + ' 条记录？')
      }
    },
    _detailModal(id) {
      // // 查看
      // this.$store.dispatch('LmsStaffTrainPlan/getPlanById', id).then(() => {
      //   this.$refs.detailModal._open(this.$store.state.LmsStaffTrainPlan.model)
      // })
    },
    _editModal(edit, id) {
      if (edit) {
        this._edit(id)
        // 编辑
        // this.$store.dispatch('LmsStaffTrainPlan/getById', id).then(() => {
        //   this.$refs.editModal._open(this.$store.state.LmsStaffTrainPlan.model)
        // })
      } else {
        // 添加
        this.$refs.editModal._open()
      }
    },
    _edit: async function(id) {
      const result = await staffTrainPlan.getById(id)
      if (result) {
        this.$refs.editModal._open(result)
      }
    },

    _add() {
      this._editModal(false)
    },
    _btnClick(msg) {
      switch (msg) {
        case '添加':
          this._editModal(false)
          break
        case '删除':
          if (this.selectData.length > 0) {
            if (this.selectData.some(i => i.status.display === '审批中'))
              return this.$Message.warning('当前状态不可删除')
            this._deleteSelected()
            // this._returns(this.selectData.map(({ id }) => id))
          } else {
            this.$Message.warning('请至少选择一条数据!')
          }
          break
      }
    }
  }
}
</script>
