<template>
  <el-dialog
    :close-on-click-modal="false"
    :visible.sync="urgentRecordDialog"
    title="催办记录"
  >
    <el-table
      :data="rows"
      :default-sort="{prop: 'urgrntDate', order: 'descending'}"
      border
      header-cell-class-name="todo-header-row"
      row-class-name="todo-row"
      size="medium"
      style="width: 100%"
    >
      <el-table-column
        align="center"
        label="流程编号"
        prop="instId"
        width="90"
      ></el-table-column>
      <el-table-column
        align="center"
        label="流程标题"
        prop="subject"
        show-overflow-tooltip
        width="150"
      ></el-table-column>
      <el-table-column
        align="center"
        label="任务名称"
        prop="nodeName"
        show-overflow-tooltip
        width="100"
      ></el-table-column>

      <el-table-column
        align="center"
        label="催办内容"
        prop="content"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        align="center"
        label="催办日期"
        prop="urgrntDate"
        width="150"
      ></el-table-column>
      <el-table-column
        align="center"
        label="被催办人"
        prop="appointee"
        show-overflow-tooltip
        width="120"
      ></el-table-column>
      <el-table-column
        align="center"
        label="催办人"
        prop="promoter"
        show-overflow-tooltip
        width="90"
      ></el-table-column>

      <el-table-column align="center" label="催办类型" width="80">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.type == 'mail'" size="small">邮件</el-tag>
          <el-tag v-if="scope.row.type == 'sms'" size="small">短信</el-tag>
          <el-tag v-if="scope.row.type == 'smsApproval'" size="small"
            >短信审批
          </el-tag>
        </template>
      </el-table-column>
    </el-table>
    <el-footer height="45px" style="padding-top:10px;">
      <el-row justify="end" type="flex">
        <el-pagination
          :current-page="pagination.page"
          :page-size="pagination.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </el-row>
    </el-footer>
  </el-dialog>
</template>

<script>
import {mapState, mapActions} from 'vuex'

export default {
  name: 'urgentRecord',
  props: ['promoterId', 'instId'],
  components: {},
  data() {
    return {
      urgentRecordDialog: false
    }
  },
  computed: mapState({
    rows: state => state.storeProcess.rows,
    pagination: state => state.storeProcess.pagination,
    total: state => state.storeProcess.total
  }),
  methods: {
    //鼠标点击页面其他其他位置不关闭弹框
    handleClose(done) {
      this.urgentRecordDialog = true
      this.search()
    },
    handleSizeChange: function(size) {
      //每页下拉显示数据
      this.$store.dispatch('storeProcess/setPaginationSize', size)
      this.search()
    },
    handleCurrentChange: function(currentPage) {
      //点击第几页
      this.$store.dispatch('storeProcess/setPaginationPageNum', currentPage)
      this.search()
    },
    search() {
      let pageBean = {
        pageBean: this.pagination,
        querys: [
          {
            property: 'PROMOTER_ID_',
            value: this.promoterId,
            operation: 'EQUAL',
            relation: 'AND'
          },
          {
            property: 'INST_ID_',
            value: this.instId,
            operation: 'EQUAL',
            relation: 'AND'
          }
        ]
      }
      this.$store.dispatch('storeProcess/getUrgrntById', pageBean)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/element-variables.scss';

::v-deep el-table th.todo-header-row {
  background-color: #fafafa;
  font-size: 13px;
}

::v-deep .el-table tr.todo-row {
  font-size: 13px;
}

::v-deep .el-container {
  background-color: #fff;
}

::v-deep .el-row {
  margin-bottom: 20px;
}

::v-deep .el-header {
  border-bottom: 1.5px solid #ededed;
}

.top-title {
  line-height: 58px;
  margin-left: 20px;
  font-size: 16px;
  color: #a2a2a2;
}

::v-deep .el-tree {
  position: relative;
  cursor: default;
  background: #fff;
  color: $--color-text-primary;
  font-size: 13px;
}

::v-deep .el-dialog__body {
  padding: 10px 20px;
  color: $--color-text-regular;
  font-size: 14px;
}
</style>
