<template>
  <a-card class="cust-list-cart">
    <div>
      <a-form layout="horizontal" class="ant-advanced-search-form">
        <div>
          <a-row>
            <a-col :span="6">
              <a-form-item label="编码" :labelCol="{span: 8}" :wrapperCol="{span: 16}">
                <a-input @pressEnter="search" placeholder="请输入" v-model="query.code"/>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="名称" :labelCol="{span: 8}" :wrapperCol="{span: 16}">
                <a-input @pressEnter="search" style="width: 100%" v-model="query.name" placeholder="请输入"/>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="代码类型" :labelCol="{span: 8}" :wrapperCol="{span: 16}">
                <a-select placeholder="请选择类型" v-model="query.type" :allowClear="true">
                  <a-select-option v-for="type in codeTypeList" v-bind:value="type.code" v-bind:key="type.id">
                    {{ type.value }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row v-if="advanced">
            <a-col :span="12">
              <a-form-item label="创建时间" :labelCol="{span: 4}" :wrapperCol="{span: 20}">
                <a-range-picker style="width:100%" :value="ctDatePicker" @change="onCtDateChange"/>
              </a-form-item>
            </a-col>
          </a-row>
        </div>
      </a-form>
    </div>
    <div>
      <a-table
        size="middle"
        @change="sortChange"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="false"
        :rowKey="rowKey"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: updateSelect}"
        bordered
      >
        <div slot="title" slot-scope="data">
          <span class="cust-title">
            <a-icon type="hdd"/>通用代码列表{{data.none}}
          </span>
          <div class="cust-table-operator">
            <a-button-group>
              <a-button type="primary" @click="search">查询</a-button>
              <a-button @click="reset">重置</a-button>
              <a-button @click="toggleAdvanced">高级查询</a-button>
              <a-button @click="addNew">新建</a-button>
<!--              <a-button @click="onDeleteBatch" type="danger">批量删除</a-button>-->
            </a-button-group>
          </div>
        </div>
        <div slot="footer" slot-scope="data">
          {{data.none}}
          <a-pagination
            @change="pageChange"
            :current="query.page"
            :defaultPageSize="defaultPageSize"
            :pageSizeOptions="$pageSizeOptions"
            @showSizeChange="sizeChange"
            class="cust-pagination"
            size="small"
            :total="total"
            showSizeChanger
            showQuickJumper
            :showTotal="$showTotal"/>
        </div>
        <span slot="action" slot-scope="text, record">
          <a @click="editRow(record)">编辑</a>
          <a-divider type="vertical"/>
          <a @click="onDelete(record)">删除</a>
        </span>
      </a-table>

    </div>
  </a-card>
</template>

<script>
  import {deleteBatch, deleteOne, getPage} from "@/api/system/sysCode";
  import {formatDate, humpToLine,setOrder} from "@/util/util";
  import {getCommonCode} from "@/api/system/sysCode";


  let detailPathName = 'sysCodeDetail'
  let codeMap = null;
  const dataSource = []
  const columns = [
    {title: '编码', width: 80, sorter: true, dataIndex: 'code'},
    {title: '名称', width: 160, dataIndex: 'value'},
    {title: '代码类型', width: 100, dataIndex: 'type', customRender: (value) => codeMap ? codeMap[SYS_CONST.CODE.CODE_TYPE][value] : ''},
    {title: '备注', dataIndex: 'remark'},
    {title: '创建人', width: 70, dataIndex: 'ctUserName'},
    {
      title: '创建时间',
      dataIndex: 'createTime',
      width: 120,
      sorter: true,
      customRender: (text) => formatDate(new Date(text), 'yyyy-MM-dd hh:mm')
    },
    {title: '修改人', width: 70, dataIndex: 'lmUserName'},
    {
      title: '修改时间',
      dataIndex: 'modifyTime',
      width: 140,
      sorter: true,
      customRender: (text) => formatDate(new Date(text), 'yyyy-MM-dd hh:mm')
    },
    {title: '操作', key: 'operation', width: 90, scopedSlots: {customRender: 'action'}}
  ]

  export default {
    name: 'SysCodeList',
    data() {
      return {
        isFirstLoad: true,
        query: {
          code: "",
          name: "",
          type: "",
          ctDateBegin: "",
          ctDateEnd: "",
          order: "",
          sort: "",
          page: 1,
          size: 10,
        },
        ctDatePicker: [],
        total: 0,
        rowKey: "code",
        advanced: false,
        loading: false,
        columns: columns,
        dataSource: dataSource,
        selectedRowKeys: [],
        selectedRows: [],
        codeTypeList: []
      }
    },
    computed: {
      defaultPageSize: function () {
        return this.$defaultPageSize()
      }
    },
    methods: {
      search() {
        this.query.page = 1
        this.loadData();
      },
      reset() {
        this.query.page = 1
        this.query.code = "";
        this.query.name = "";
        this.query.type = "";
        this.query.ctDateBegin = "";
        this.query.ctDateEnd = "";
        this.ctDatePicker = [];
        this.loadData();
      },
      pageChange(page) {
        this.query.page = page;
        this.loadData();
      },
      sizeChange(current, size) {
        this.query.size = size;
        this.loadData();
      },
      loadData(pageSize) {
        if (pageSize && !isNaN(pageSize)) {
          this.query.size = pageSize
        }
        this.loading = true;
        getPage(this.query).then(response => {
          if (response && response.code == SYS_CONST.REQUEST.SUCCEED) {
            let respData = response.data;
            this.total = respData.total;
            this.dataSource = respData.list;
          }
          this.loading = false;
        });
      },
      toggleAdvanced() {
        this.advanced = !this.advanced;
        this.query.ctDateBegin = "";
        this.query.ctDateEnd = "";
        this.ctDatePicker = [];
        this.loadData();
      },
      sortChange(pagination, filters, sorter) {
        this.query.sort = humpToLine(sorter.field);
        this.query.order = setOrder(sorter.order);
        this.loadData();
      },
      addNew() {
        this.editRow()
      },
      editRow(row) {
        this.$router.push({name: detailPathName, query: {id: row ? row.id : 0}})
      },
      deleteRow(id) {
        this.loading = true;
        deleteOne(id).then(response => {
          if (response && response.code == SYS_CONST.REQUEST.SUCCEED) {
            this.loadData();
          } else {
            this.loading = false;
          }
        });
      },
      onDelete(row) {
        let _this = this;
        this.$confirm({
          title: '提示',
          content: '确定删除这条记录吗？',
          onOk() {
            _this.deleteRow(row.id);
          },
          onCancel() {
          },
        });
      },
      deleteBatch() {
        this.loading = true;
        deleteBatch(this.selectedRowKeys).then(response => {
          if (response && response.code == SYS_CONST.REQUEST.SUCCEED) {
            this.loadData();
          } else {
            this.loading = false;
          }
        });
      },
      onDeleteBatch() {
        if (this.selectedRowKeys.length == 0) {
          return;
        }
        let _this = this;
        this.$confirm({
          title: '提示',
          content: '确定删除选中的记录吗？',
          onOk() {
            _this.deleteBatch()
          },
          onCancel() {
          },
        });
      },
      updateSelect(selectedRowKeys) {
        this.selectedRowKeys = selectedRowKeys
      },
      onCtDateChange(date, dateString) {
        this.ctDatePicker = date;
        this.query.ctDateBegin = dateString[0]
        this.query.ctDateEnd = dateString[1]
        this.loadData()
      },
      getSysCode() {
        getCommonCode([SYS_CONST.CODE.CODE_TYPE]).then(response => {
          if (response && response.code == SYS_CONST.REQUEST.SUCCEED) {
            let codList = response.data;
            this.codeTypeList = response.data[SYS_CONST.CODE.CODE_TYPE];
            codeMap = this.$codeToMap(codList)
          }
        })
      },
    },
    mounted() {
      // 查询系统码表
      this.getSysCode();
    },
    activated() {
      if (this.isFirstLoad == true) {
        this.loadData(this.defaultPageSize)
        this.isFirstLoad = false
      } else {
        let isModify = this.$route.query.isModify
        if (isModify == true) {
          this.loadData()
        } else if (isModify != undefined) {
          this.loadData()
        }
      }

    }
  }
</script>