<template>
    <div>
        <Tabs type="card" @on-click="changeTpye" v-model="value">
            <TabPane label="字典列表">
                <Row>
                    <Col span="20">
                        <Form :model="tittleFormItem" :label-width="80">
                            <Row>
                                <Col span="12">
                                    <FormItem label="类型：">
                                        <Select clearable v-model="tittleFormItem.type">
                                            <Option v-for="(item,index) in this.menu" :key="index" :value="item.value">{{item.value}}</Option>
                                        </Select>
                                    </FormItem>
                                </Col>
                                <Col span="6">
                                    <FormItem>
                                        <Input clearable v-model="tittleFormItem.label" placeholder="标签"></Input>
                                    </FormItem>
                                </Col>
                                <Col span="6">
                                    <FormItem>
                                        <Input clearable v-model="tittleFormItem.description" placeholder="描述"></Input>
                                    </FormItem>
                                </Col>
                            </Row>
                        </Form>
                    </Col>
                    <Col span="3" offset="1">
                        <Button type="success" @click="selectList">搜索</Button>
                    </Col>
                </Row>
                <template>
                    <Table :loading="loading" border :columns="columns" :data="dataList">
                        <template slot-scope="{ row }" slot="action">
                            <Button type="primary" size="small" style="margin-right: 5px" @click="adddict">添加</Button>
                            <Button type="primary" size="small" style="margin-right: 5px" @click="updatedict(row)">修改</Button>
                            <Button type="error" size="small" @click="deletedict(row)">删除</Button>
                        </template>
                    </Table>
                </template>
                <br>
                <Row type="flex" justify="end">
                    <Page :total="total" @on-change="pageChange" :page-size="pageSize"/>
                </Row>
            </TabPane>
            <TabPane v-if="tabvalue===1" label="添加字典">
                <template>
                    <Row>
                        <Col span="10" offset="3">
                            <Form :model="formItem" :label-width="80">
                                <FormItem label="键值:">
                                    <Input v-model="formItem.value"></Input>
                                </FormItem>
                                <FormItem label="标签名:">
                                    <Input v-model="formItem.label"></Input>
                                </FormItem>
                                <FormItem label="类型:">
                                    <Input v-model="formItem.type"></Input>
                                </FormItem>
                                <FormItem label="描述:">
                                    <Input v-model="formItem.description"></Input>
                                </FormItem>
                                <FormItem label="所属模块:">
                                    <Input v-model="formItem.type_category" placeholder="center名称，如：sc、tc"></Input>
                                </FormItem>
                                <FormItem label="字典类型">
                                    <RadioGroup v-model="formItem.dict_type">
                                        <Radio label="false">系统固有</Radio>
                                        <Radio label="true">业务</Radio>
                                    </RadioGroup>
                                </FormItem>
                                <FormItem label="排序:">
                                    <Input v-model="formItem.sort"></Input>
                                </FormItem>
                                <FormItem label="Text:">
                                    <Input v-model="formItem.remarks" type="textarea" :autosize="{minRows: 2,maxRows: 5}" ></Input>
                                </FormItem>
                            </Form>
                            <Button :loading="buttonloading" style="margin-left: 15px;margin-right: 15px" type="primary" @click="save">保存</Button>
                            <Button @click="close">取消</Button>
                        </Col>
                    </Row>
                </template>
            </TabPane>
            <TabPane v-if="tabvalue===2"  label="修改字典">
                <template>
                    <Row>
                        <Col span="10" offset="3">
                            <Form :model="updateformItem" :label-width="80">
                                <FormItem label="键值:">
                                    <Input v-model="updateformItem.value"></Input>
                                </FormItem>
                                <FormItem label="标签名:">
                                    <Input v-model="updateformItem.label"></Input>
                                </FormItem>
                                <FormItem label="类型:">
                                    <Input v-model="updateformItem.type"></Input>
                                </FormItem>
                                <FormItem label="描述:">
                                    <Input v-model="updateformItem.description"></Input>
                                </FormItem>
                                <FormItem label="所属模块:">
                                    <Input v-model="updateformItem.type_category"></Input>
                                </FormItem>
                                <FormItem label="字典类型">
                                    <RadioGroup v-model="updateformItem.dict_type">
                                        <Radio label="false">系统固有</Radio>
                                        <Radio label="true">业务</Radio>
                                    </RadioGroup>
                                </FormItem>
                                <FormItem label="排序:">
                                    <Input v-model="updateformItem.sort"></Input>
                                </FormItem>
                                <FormItem label="Text:">
                                    <Input v-model="updateformItem.remarks" type="textarea" :autosize="{minRows: 2,maxRows: 5}" ></Input>
                                </FormItem>
                            </Form>
                            <Button :loading="buttonloading" style="margin-left: 15px;margin-right: 15px" type="primary">保存</Button>
                            <Button @click="close">取消</Button>
                        </Col>
                    </Row>
                </template>
            </TabPane>
        </Tabs>
        <Modal
                v-model="modal1"
                @on-ok="ok"
                >
            <p style="margin-top: 20px">确实要删除字典吗？</p>
        </Modal>
    </div>
</template>

<script>
import { delDict, getDictList, getList, save } from '../../../api/system/sys-dict-list'

export default {
  name: 'WlDictList',
  data () {
    return {
      menu: [],
      tittleFormItem: {
        type: '',
        label: '',
        description: ''
      },
      value: 0,
      buttonloading: false,
      loading: true,
      tabvalue: 1,
      formItem: {
        value: '',
        description: '',
        sort: '10',
        label: '',
        type: '',
        remarks: '',
        type_category: '',
        dict_type: 'true'
      },
      columns: [
        {
          title: '键值',
          key: 'value',
          align: 'center'
        },
        {
          title: '标签名',
          key: 'label',
          align: 'center'
        },
        {
          title: '类型',
          key: 'type',
          align: 'center'
        },
        {
          title: '描述',
          key: 'description',
          align: 'center'
        },
        {
          title: '排序',
          key: 'sort',
          align: 'center'
        },
        {
          title: '操作',
          slot: 'action',
          width: 300,
          align: 'center'
        }
      ],
      dataList: [],
      total: 0,
      pageNo: 1,
      pageSize: 12,
      updateformItem: {},
      modal1: false,
      deleteRow: {}
    }
  },
  methods: {
    deletedict (value) {
      this.modal1 = true
      this.deleteRow = value
    },
    ok () {
      delDict(this.deleteRow).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Message.success('成功')
          this.init()
        } else {
          this.$Message.error(ret.data.errmsg)
        }
      })
    },
    close () {
      this.value = 0
      this.tabvalue = 1
    },
    selectList () {
      this.pageNo = 1
      this.init()
    },
    save () {
      this.buttonloading = true
      let data = this.$common.xeUtils.clone(this.formItem)
      if (data.dict_type === 'true') {
        data.dict_type = true
      } else {
        data.dict_type = false
      }
      save(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Message.success('成功')
          this.buttonloading = false
          this.value = 0
          this.tabvalue = 1
          this.formItem = {}
          this.init()
        } else {
          this.$Message.error(ret.data.errmsg)
        }
      })
    },
    changeTpye () {
      if (this.value === 0) {
        this.tabvalue = 1
      }
    },
    adddict () {
      this.value = 1
      this.tabvalue = 1
    },
    updatedict (value) {
      this.value = 1
      this.tabvalue = 2
      let data = this.$common.xeUtils.clone(value)
      if (data.dict_type === true) {
        data.dict_type = 'true'
      } else {
        data.dict_type = 'false'
      }
      this.updateformItem = data
    },
    pageChange (value) {
      this.pageNo = value
      this.init()
    },
    getList () {
      getList().then(ret => {
        if (ret.data.errcode === 0) {
          this.menu = ret.data.data
        } else {
          this.$Message.error(ret.data.errmsg)
        }
      })
    },
    init () {
      let data = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        type: this.tittleFormItem.type,
        label: this.tittleFormItem.label,
        description: this.tittleFormItem.description
      }
      getDictList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.total = ret.data.data.totalRecord
          this.dataList = ret.data.data.results
          this.loading = false
          this.getList()
        }
      })
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style scoped>

</style>
