<template>
  <div>
    <data-table ref="pagingTypeTable" :options="typeOptions" :list-query="typeListQuery"
                @multi-actions="handleMultiAction">
      <template slot="filter-content">
        <el-input v-model="typeListQuery.params.userName" style="width: 200px" placeholder="搜索登录名" class="filter-item"/>
        <el-input v-model="typeListQuery.params.realName" style="width: 200px" placeholder="搜索姓名" class="filter-item"/>
        <el-button class="filter-item" type="primary" icon="el-icon-plus" @click="handleTypeAdd">
          添加
        </el-button>
      </template>
      <template slot="data-columns">
        <el-table-column type="selection" width="55"/>
        <el-table-column align="center" label="码值类型">
          <template slot-scope="scope">
            <a style="color: #1890ff" @click="handleTypeUpdate(scope.row)">{{ scope.row.code }}</a>
          </template>
        </el-table-column>
        <el-table-column align="center" label="码值描述" prop="content"/>
        <el-table-column align="center" label="码值来源" prop="sourceType"/>
        <el-table-column align="center" label="码值来源sql" prop="sourceSql"/>
        <el-table-column align="center" label="状态" prop="state" class-name="STATE" :formatter="dataFormatter"/>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" icon="el-icon-view" @click="initDictData(scope.row)">码值详情</el-button>
          </template>
        </el-table-column>
      </template>
    </data-table>

    <data-table ref="pagingDataTable" :options="dataOptions" :list-query="dataListQuery"
                @multi-actions="handleMultiAction">
      <template slot="filter-content">
        <el-input v-model="dataListQuery.params.userName" style="width: 200px" placeholder="搜索登录名" class="filter-item"/>
        <el-input v-model="dataListQuery.params.realName" style="width: 200px" placeholder="搜索姓名" class="filter-item"/>
        <el-button class="filter-item" type="primary" icon="el-icon-plus" @click="handleDataAdd">
          添加
        </el-button>
      </template>
      <template slot="data-columns">
        <el-table-column type="selection" width="55"/>
        <el-table-column align="center" label="码值类型">
          <template slot-scope="scope">
            <a style="color: #1890ff" @click="handleDataUpdate(scope.row)">{{ scope.row.code }}</a>
          </template>
        </el-table-column>
        <el-table-column align="center" label="码值中文名称" prop="text"/>
        <el-table-column align="center" label="码值" prop="value"/>
        <el-table-column align="center" label="状态" prop="state" class-name="STATE" :formatter="dataFormatter"/>
        <el-table-column align="center" label="优先级(越小越靠前)" prop="priority"/>
      </template>
    </data-table>

    <el-dialog :visible.sync="dialogVisible" title="编辑码值大类" width="500px">
      <el-form :model="typeFormData" label-position="left" label-width="100px">
        <el-form-item label="码值类型">
          <el-input v-model="typeFormData.code" :disabled="typeFlag"/>
        </el-form-item>
        <el-form-item label="码值描述">
          <el-input v-model="typeFormData.content"/>
        </el-form-item>
        <el-form-item label="码值来源">
          <el-input v-model="typeFormData.sourceType"/>
        </el-form-item>
        <el-form-item label="码值来源sql">
          <el-input v-model="typeFormData.sourceSql"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleTypeCancel">取 消</el-button>
        <el-button type="primary" @click="handleTypeSave">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="dialogVisibleData" title="编辑码值" width="500px">
      <el-form :model="dataFormData" label-position="left" label-width="100px">
        <el-form-item label="码值类型">
          <el-input v-model="dataFormData.code" :disabled="true"/>
        </el-form-item>
        <el-form-item label="码值中文名称">
          <el-input v-model="dataFormData.text"/>
        </el-form-item>
        <el-form-item label="码值">
          <el-input v-model="dataFormData.value"/>
        </el-form-item>
        <el-form-item label="优先级">
          <el-input v-model="dataFormData.priority"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleDataCancel">取 消</el-button>
        <el-button type="primary" @click="handleDataSave">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import DataTable from '@/components/DataTable'
  import {saveTypeData, saveData} from '@/api/sys/dict/dict'
  import {dataFormatter} from '@/utils'
  export default {
    name: 'SysDict',
    components: {DataTable},
    data() {
      return {
        // 码值 是否可编辑
        typeFlag: true,
        treeData: [],
        defaultProps: {
          value: 'id',
          label: 'deptName',
          children: 'children'
        },
        dialogVisible: false,
        dialogVisibleData: false,
        typeListQuery: {
          current: 1,
          size: 10,
          params: {}
        },

        typeFormData: {
          code: "",
          content: "",
          sourceType: "",
          sourceSql: ""
        },
        dataFormData: {
          code: "",
          text: "",
          value: ""
        },
        typeOptions: {
          // 列表请求URL
          listUrl: '/sys/api/dict/type/paging',
          // 启用禁用
        stateUrl: '/sys/api/dict/type/state',
        deleteUrl: '/sys/api/dict/type/delete',
        // 批量操作列表
        multiActions: [
          {
            value: 'enable',
            label: '启用'
          }, {
            value: 'disable',
            label: '禁用'
          },
          {
            value: 'delete',
            label: '删除'
          }
          ]
        },

        dataListQuery: {
          current: 1,
          size: 10,
          params: {}
        },
        dataOptions: {
          // 列表请求URL
          listUrl: '/sys/api/dict/data/paging',
          // 启用禁用
          stateUrl: '/sys/api/dict/data/state',
          deleteUrl: '/sys/api/dict/data/delete',
          // 批量操作列表
          multiActions: [
            {
              value: 'enable',
              label: '启用'
            }, {
              value: 'disable',
              label: '禁用'
            },
            {
              value: 'delete',
              label: '删除'
            }
          ]
        }
      }
    },

    created() {

    },

    methods: {
      dataFormatter,
      // 根据type 初始化 码值列表
      initDictData(row) {
        this.dataListQuery.params.code = row.code
        this.$refs.pagingDataTable.getList()
      },
      // 码值大类添加 按钮
      handleTypeAdd() {
        this.typeFormData = {}
        this.typeFlag = false
        this.dialogVisible = true
      },
      handleDataAdd(){
        this.dataFormData = {}
        this.dataFormData.code = this.dataListQuery.params.code
        this.dialogVisibleData = true
      },
      handleTypeUpdate(row) {
        this.dialogVisible = true
        this.typeFlag = true
        this.typeFormData = row
      },
      handleDataUpdate(row) {
        this.dialogVisibleData = true
        this.dataFormData = row
      },
      handleTypeSave() {
        saveTypeData(this.typeFormData).then(() => {
          this.$message({
            type: 'success',
            message: '码值修改成功!'
          })
          this.handleTypeCancel()
        })
      },
      handleTypeCancel(){
        this.dialogVisible = false
        this.$refs.pagingTypeTable.getList()
      },
      handleDataCancel(){
        this.dialogVisibleData = false
        this.$refs.pagingDataTable.getList()
      },
      handleDataSave(){
        saveData(this.dataFormData).then(() => {
          this.$message({
            type: 'success',
            message: '码值修改成功!'
          })
          this.handleDataCancel()
        })
      },

      // 批量操作监听
      handleMultiAction(obj) {
        if (obj.opt === 'cancel') {
          this.handleCancelOrder(obj.ids)
        }
      },
    }
  }
</script>
