<template>
  <div>
    <Modal v-model="showRelProModal" v-drag width="1000" class="modal-footer-none">
      <p slot="header">
        员工工作经历
      </p>
      <Row>
        <!--查询-->
        <Col span="24" />
        <Form
          id="add-form-experience"
          ref="formObj"
          :model="formObj"
          :rules="ruleValidate"
          :label-width="75"
          inline
        >
          <Form-item label="时间段" prop="experience">
            <Input v-model="formObj.experience" placeholder="请输入时间段" />
          </Form-item>
          <Form-item label="内容" prop="content" class="width-23">
            <Input v-model="formObj.content" placeholder="请输入内容" />
          </Form-item>
          <Form-item label="备注" prop="remark" class="width-23">
            <Input v-model="formObj.remark" placeholder="请输入备注" />
          </Form-item>
          <Form-item>
            <Button type="primary" @click="_relAdd">
              添加
            </Button>
          </Form-item>
        </Form>
        </Col>
        <!-- 表格 -->
        <Col span="24" style="margin-bottom: 0px" />
        <element-table
          ref="pageTable"
          :page-columns="pageColumns"
          :table-height="tableHeight"
          :get-page="getPage"
          :opt-col-width="80"
          :icon-msg="iconMsg"
          hide-check-box
          @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 === 'content'">
                <span v-if="index==scope.$index">
                  <Input v-model="scope.row.content" style="width: 160px" /> </Input>
                  <Icon
                    style="cursor:pointer;float:right;margin-top: 10px;color:#19be6b"
                    size="17"
                    type="checkmark"
                    @click="_saveDate(scope.row)"
                  />
                </span>
                <span v-else>
                  <Icon
                    style="cursor:pointer;float:right;margin-top: 10px;"
                    size="17"
                    type="edit"
                    @click="_editDate(scope)"
                  />
                  {{ scope.row[item.key] }}
                </span>
              </div>
              <div v-else-if="item.date">
                {{ scope.row[item.key]?$dateformat(scope.row[item.key],'yyyy-mm-dd'):'' }}
              </div>
              <div v-else>
                {{ scope.row[item.key] }}
              </div>
            </template>
          </el-table-column>
        </element-table>
        </Col>
      </Row>
    </Modal>
  </div>
</template>

<script>
import { staffExperience } from '../../../../api'

export default {
  data() {
    return {
      ruleValidate: {
        content: [
          { required: true, min: 0, message: '内容不能为空', trigger: 'blur' }
        ],
        experience: [
          { required: true, message: '时间段不能为空', trigger: 'change' }
        ]
      },
      selectIds: [],
      index: '-1',
      experience: '',
      pageColumns: [
        { title: '时间段', key: 'experience', ellipsis: true },
        { title: '内容', key: 'content' },
        { title: '备注', key: 'remark' }
      ],
      iconMsg: [{ type: 'pt-a-trash', id: '', name: '删除' }],
      showRelProModal: false,
      formObj: {
        staffId: '',
        name: '',
        experience: '',
        remark: ''
      },
      getPage: {},
      currentRow: {},
      endDate: '',
      beginDate: ''
    }
  },
  computed: {
    tableHeight: function() {
      return '400'
    }
  },
  mounted() {
    this._page()
  },
  methods: {
    _iconClick(res, data) {
      switch (res) {
        case '删除':
          this._deleteById(data.id)
          break
      }
    },
    _editDate(data) {
      // 编辑内容
      this.index = data.$index
    },
    _saveDate(data) {
      // 保存内容
      this.currentRow = data
      this.index = '-1'
      // const tempData = {
      //   id: data.id,
      //   content: this.currentRow.content,
      //   experience: this.currentRow.experience,
      //   remark: this.currentRow.remark
      // }
      // this.$store.dispatch('LmsStaffExperience/add', tempData).then(() => {
      //   this._change(this.$store.state.LmsStaffExperience.success)
      // })
    },
    // _change(msg) {
    //   if (msg) {
    //     this.$Message.success('编辑成功!')
    //     this._page()
    //   } else {
    //     this.$Message.error('编辑失败!')
    //   }
    // },
    _page: async function() {
      const result = await staffExperience.page({
        staffId: this.formObj.staffId
      })
      if (result) {
        this.getPage = result
        this.$refs.pageTable._initTable()
      }
    },
    _deleteByIds(ids, content) {
      this.$Modal.confirm({
        title: '提示',
        content: content || '确定删除该记录？',
        onOk: () => {
          // this.$store
          //   .dispatch('LmsStaffExperience/deleteByIds', ids)
          //   .then(() => {
          //     if (this.$store.state.LmsStaffExperience.success) {
          //       this._page()
          //       this.$Message.success('删除成功！')
          //     }
          //   })
          this._delete(ids)
        }
      })
    },
    _delete: async function(ids) {
      const result = await staffExperience.deleteById(ids)
      if (result) {
        this.$Message.success('删除成功!')
        this._page()
      }
    },
    _deleteById(id) {
      // 删除一条记录
      this._deleteByIds([id])
    },
    _open(data) {
      this.showRelProModal = true
      this.formObj = this.$resetFields(this.formObj)
      this.formObj.staffId = data
      this._page() // 根据标准id过滤quote_list
    },
    _relAdd() {
      this.$refs.formObj.validate(valid => {
        if (valid) {
          // this.$store
          //   .dispatch('LmsStaffExperience/add', this.formObj)
          //   .then(() => {
          //     this._page()
          //     this._resultChange('添加成功!')
          //   })
          this._save()
        } else {
          this.$Message.error('表单验证失败!')
        }
      })
    },

    _save: async function() {
      // 添加
      const result = await staffExperience.add(this.formObj)
      if (result) {
        this.formObj.name = ''
        this.formObj.experience = ''
        this.formObj.remark = ''
        this.$Message.success('添加成功')
        this.$emit('on-result-change')
        this._page()
      }
    },
    _tableResultChange: function(msg, data) {
      switch (msg) {
        case 'selectIds':
          this.selectIds = data
          break
        case 'iconClick':
          this._iconClick(data.name, data.rowData)
          break
        default:
          this._page()
      }
    },
    _resultChange(msg) {
      this.$refs.formObj.resetFields()
      this.$Message.success(msg)
      this.$emit('on-result-change')
      this._page()
    }
  }
}
</script>
<style>
.ivu-page {
  margin-bottom: 0px;
}
</style>
