<template>
  <ai-list class="AppDispatchManagement">
    <template slot="title">
      <ai-title title="公文流转" isShowBottomBorder></ai-title>
    </template>
    <template slot="content">
      <ai-search-bar>
        <template slot="left">
          <ai-select
              v-model="searchObj.documentType"
              placeholder="选择公文类型"
              clearable
              @change="(page.current = 1), getList()"
              :selectList="dict.getDict('officialDocumentName')"
          ></ai-select>
          <ai-select
              v-model="searchObj.confidentialityLevel"
              placeholder="选择保密等级"
              clearable
              @change="(page.current = 1), getList()"
              :selectList="dict.getDict('officialDocumentConfidentialityLevel')"
          ></ai-select>
          <ai-select
              v-model="searchObj.status"
              placeholder="选择流转状态"
              clearable
              @change="(page.current = 1), getList()"
              :selectList="dict.getDict('documentStatus')"
          ></ai-select>
          <ai-select
              v-model="searchObj.readType"
              placeholder="选择阅示类型"
              clearable
              @change="(page.current = 1), getList()"
              :selectList="dict.getDict('officialDocumentReadType')"
          ></ai-select>

          <!-- <el-row class="dateRange" type="flex" align="middle">
            <span class="dateLabel">操作时间</span>
            <el-date-picker
              size="small"
              v-model="searchObj.createTimeStart"
              placeholder="开始日期"
              @change="page.current = 1, getList()"
              value-format="yyyy-MM-dd" />
            <el-date-picker
              size="small"
              v-model="searchObj.createTimeEnd"
              placeholder="结束日期"
              @change="page.current = 1, getList()"
              value-format="yyyy-MM-dd" />
          </el-row> -->
        </template>
        <template slot="right">
          <el-input placeholder="输入公文名称/编号"
                    v-model="searchObj.name"
                    size="small"
                    @change="(page.current = 1), getList()"
                    clearable
                    prefix-icon="iconfont iconSearch"/>
        </template>
      </ai-search-bar>
      <ai-search-bar class="mt10">
        <template slot="left">
          <el-button type="primary" icon="iconfont iconAdd" @click="toAdd({})"
          >添加
          </el-button
          >
        </template>
      </ai-search-bar>
      <ai-table
          :tableData="tableData"
          :col-configs="colConfigs"
          :total="page.total"
          ref="aitableex"
          :current.sync="page.current"
          row-key="id"
          default-expand-all
          :tree-props="{ children: 'merchandiseList' }"
          :size.sync="page.size"
          @getList="getList"
          @selection-change="handleSelectionChange"
      >
        <el-table-column slot="selection" type="selection" width="55"></el-table-column>
        <el-table-column slot="options" label="操作" align="center" width="200">
          <template slot-scope="{ row }">
            <el-button v-if="row.status != 0" type="text" @click="goDetail(row)">详情</el-button>
            <el-button v-if="row.status == 0" type="text" @click="toAdd(row)">编辑</el-button>
            <el-button type="text" @click="del(row)">删除</el-button>
          </template>
        </el-table-column>
      </ai-table>
    </template>
  </ai-list>
</template>

<script>
export default {
  name: "management",
  props: {
    instance: Function,
    dict: Object,
    permissions: Function,
    areaId: String,
  },
  data() {
    return {
      searchObj: {
        documentType: '',
        confidentialityLevel: '',
        readType: '',
        createTimeStart: null,
        createTimeEnd: null,
        name: '',
      },
      page: {
        size: 10,
        current: 1,
        total: 0,
      },
      tableData: [],
      shopList: [],
      ids: [],
    };
  },
  computed: {
    colConfigs() {
      return [
        {slot: "selection", label: "", align: "center"},
        {
          prop: "documentCode",
          label: "公文编号",
          width: 120,
          align: "center",
        },
        {
          prop: "documentName",
          label: "公文名称",
        },
        {
          prop: "documentType",
          label: "公文类型",
          width: 120,
          align: "center",
          formart: (documentType) =>
              this.$dict.getLabel("officialDocumentName", documentType),
        },
        {
          prop: "readType",
          label: "阅示类型",
          width: 120,
          align: "center",
          formart: (readType) =>
              this.$dict.getLabel("officialDocumentReadType", readType),
        },
        {
          prop: "confidentialityLevel",
          label: "保密等级",
          width: 120,
          align: "center",
          formart: (confidentialityLevel) =>
              this.$dict.getLabel("officialDocumentConfidentialityLevel", confidentialityLevel),
        },
        {
          prop: "flowUserName",
          label: "当前流转对象",
          width: 180,
          align: "center",
        },
        {
          prop: "status",
          label: "流转状态",
          width: 120,
          align: "center",
          render: (h, {row}) => {
            return h('span', {style: {color: this.dict.getColor('documentStatus', row.status)}}, this.dict.getLabel('documentStatus', row.status))
          },
        },
        {
          prop: "createTime",
          label: "操作时间",
          width: 180,
          align: "center",
        },
        {
          prop: "createUserName",
          label: "操作人",
          width: 120,
          align: "center",
        },
        {slot: "options", label: "操作"},
      ];
    },
  },
  mounted() {
    this.dict.load('officialDocumentName', 'officialDocumentConfidentialityLevel', 'officialDocumentReadType', 'documentStatus').then(() => {
      this.$nextTick(() => this.getList())
    })
  },
  methods: {
    changeTime() {
      this.page.current = 1
      this.getList()
    },
    getList() {
      this.instance.post(`/app/appofficialdocumentinfo/list`, null, {
        params: {
          ...this.searchObj,
          ...this.page
        },
      }).then((res) => {
        if (res.code == 0) {
          this.tableData = res.data.records;
          this.tableData.map((item) => {
            if (item.createTime) {
              item.createTime = item.createTime.substring(0, 10)
            } else {
              item.createTime = '-'
            }
          })
          this.page.total = res.data.total;
        }
      });
    },
    reset() {
      Object.keys(this.searchObj).forEach((e) => {
        this.searchObj[e] = "";
      });
      this.searchObj.createTimeStart = null;
      this.searchObj.createTimeEnd = null;
      this.getList();
    },
    toAdd(params) {
      this.$emit('change', {
        type: 'add',
        params: params
      })
    },
    goDetail(row) {
      this.$emit('change', {
        type: 'detail',
        params: {
          ...row
        }
      })
    },
    del(item) {
      this.$confirm("删除后不可恢复，是否要删除该公文？", {
        type: 'error'
      }).then(() => {
        this.instance
        .post(`/app/appofficialdocumentinfo/delete?ids=${item.id}`)
        .then((res) => {
          if (res.code == 0) {
            this.$message.success("删除成功！");
            this.getList();
          }
        });
      });
    },
    handleSelectionChange(val) {
      this.ids = [];
      val.forEach(e => {
        this.ids.push(e.id)
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.AppDispatchManagement {
  height: 100%;
  overflow: auto;
  background: #f3f6f9;

  ::v-deep .el-range-editor--small.el-input__inner {
    width: 258px;
  }

  ::v-deep .dateRange {
    .dateLabel {
      height: 32px;
      border: 1px solid #D0D4DC;
      line-height: 32px;
      padding: 0 8px;
      background: #F5F5F5;
    }

    .el-input__inner {
      border-radius: 0;
      transform: translateX(-1px);
    }
  }

  .iconfont {
    cursor: pointer;
    margin-right: 8px;
  }

  .iconCorrect {
    color: #53b43b;
  }

  .iconReject {
    color: #e75555;
    padding: 0 8px;
  }
}
</style>
