<template>
  <div class="dict">
    <!-- <el-card shadow="never">
      adsf
    </el-card> -->
    <el-card shadow="never" style="margin-top:10px">
      <el-row style="margin-bottom:10px">
        <el-col :span="6">
          <el-button type="primary" size="mini" icon="el-icon-plus" @click="addVisible = true">新增</el-button>
          <el-button type="primary" size="mini" icon="el-icon-s-promotion" @click="testDictLabel">请求</el-button>
        </el-col>
      </el-row>
      <el-table
        v-loading="loading"
        :data="list"
        :header-cell-style="{background:'#f5f5f5',color:'#262626',fontSize:'13px'}"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
        />
        <el-table-column
          prop="no"
          label="序号"
          width="50"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.$index+(currentPage-1)*pageSize+1 }}
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="标签"
          min-width="200"
          align="center"
        />
        <el-table-column
          prop="code"
          min-width="200"
          label="代码"
          align="center"
        />

        <el-table-column
          prop="description"
          label="描述"
          min-width="200"
          align="center"
        />
        <el-table-column
          prop="sort"
          width="100"
          label="排序"
          align="center"
        />
        <el-table-column
          label="状态"
          width="100"
          align="center"
          prop="status"
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status==='1'" type="success">正常</el-tag>
            <el-tag v-else type="info">停用</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          width="160px"
          label="创建时间"
          align="center"
        />
        <el-table-column
          width="150px"
          label="操作"
          align="center"
        >
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="editDict(scope.row)">
              修改
            </el-button>
            <el-button type="text" size="small" @click="deleteDict(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row style="margin: 20px auto">
        <el-col :span="24" style="text-align:right">
          <el-pagination
            background
            :current-page.sync="currentPage"
            :page-sizes="[10, 20, 30, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="value=>{pageSize=value,getList()}"
            @current-change="value=>{currenPage=value,getList()}"
          />
        </el-col>
      </el-row>
    </el-card>
    <el-dialog
      title="添加字典标签"
      :visible.sync="addVisible"
      width="500px"
      destroy-on-close
      :close-on-click-modal="false"
    >
      <el-form ref="addDictLabelForm" :model="addDictLabelForm" label-width="80px" size="mini" :rules="dictLabelFormRules">
        <el-form-item label="字典类型" prop="type">
          <el-input v-model="addDictLabelForm.type" disabled />
        </el-form-item>
        <el-form-item label="标签" prop="name">
          <el-input v-model.trim="addDictLabelForm.name" />
        </el-form-item>
        <el-form-item label="代码" prop="code">
          <el-input v-model.trim="addDictLabelForm.code" />
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input-number v-model="addDictLabelForm.sort" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="addDictLabelForm.status" size="mini">
            <el-radio label="1">正常</el-radio>
            <el-radio label="2">停用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input v-model="addDictLabelForm.description" type="textarea" :rows="4" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :loading="loading" @click="subAdd">创 建</el-button>
          <el-button @click="$refs.addDictLabelForm.resetFields(),addDictLabelForm={type:type,status:'1',sort:0}">重 置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog
      title="修改字典标签"
      :visible.sync="updateVisible"
      width="500px"
      destroy-on-close
      :close-on-click-modal="false"
    >
      <el-form ref="updateDictLabelForm" :model="updateDictLabelForm" label-width="80px" size="mini" :rules="dictLabelFormRules">
        <el-form-item label="字典类型" prop="type">
          <el-input v-model="updateDictLabelForm.type" disabled />
        </el-form-item>
        <el-form-item label="标签" prop="name">
          <el-input v-model.trim="updateDictLabelForm.name" />
        </el-form-item>
        <el-form-item label="代码" prop="code">
          <el-input v-model.trim="updateDictLabelForm.code" />
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input-number v-model="updateDictLabelForm.sort" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="updateDictLabelForm.status" size="mini">
            <el-radio label="1">正常</el-radio>
            <el-radio label="2">停用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input v-model="updateDictLabelForm.description" type="textarea" :rows="4" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :loading="loading" @click="subUpdate">修 改</el-button>
          <el-button @click="$refs.updateDictLabelForm.resetFields(),updateDictLabelForm = tempupdateDictLabelForm">重 置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { addDictLabel, listDictLabel, updateDictLabel, removeDictLabel } from '@/api/dict.js'
import { getRootPath, getPageTitle } from '@/utils/utils.js'
export default {
  name: 'DictLabelList',
  data() {
    return {
      loading: false,
      list: [],
      addDictLabelForm: {
        name: '',
        type: '',
        description: '',
        status: '1',
        sort: 0
      },
      addVisible: false,
      dictLabelFormRules: {
        name: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        sort: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '请输入', trigger: 'blur' }
        ]
      },
      searchFrom: {},
      currentPage: 1,
      pageSize: 10,
      total: undefined,
      updateVisible: false,
      updateDictLabelForm: {},
      tempupdateDictLabelForm: {},
      type: undefined
    }
  },
  created() {
  },
  mounted() {
    const { type, name } = this.$route.query
    if (!type) {
      this.$router.push('/dict/list')
      return
    }
    // HTML的title
    if (name) {
      document.title = getPageTitle(name)
    }
    this.addDictLabelForm.type = type
    this.type = type
    this.getList()
  },
  methods: {
    subAdd() {
      this.$refs.addDictLabelForm.validate((valid) => {
        if (valid) {
          this.loading = true
          addDictLabel(this.addDictLabelForm).then(res => {
            if (res.code === 0) {
              this.addVisible = false
              this.$message.success('创建成功')
              this.getList()
            } else {
              this.$message.warning(res.msg)
            }
            this.loading = false
          })
        }
      })
    },
    getList() {
      const data = {
        entity: {
          type: this.type,
          ...this.searchFrom
        },
        current: this.currentPage,
        size: this.pageSize
      }
      this.loading = true
      listDictLabel(data).then(res => {
        if (res.code === 0) {
          this.addVisible = false
          this.list = res.data.records
          this.total = res.data.total
        } else {
          this.$message.warning(res.msg)
        }
        this.loading = false
      })
    },
    editDict(row) {
      this.updateDictLabelForm = Object.assign({}, row)
      this.tempupdateDictLabelForm = Object.assign({}, row)
      this.updateVisible = true
    },
    deleteDict(row) {
      this.$confirm(`确认删除标签为 '${row.name}' ?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeDictLabel({ uuid: row.uuid }).then(res => {
          if (res.code === 0) {
            this.$message.success('删除成功')
            this.getList()
          } else {
            this.$message.warning(res.msg)
          }

          this.getList()
        })
      })
    },
    subUpdate(row) {
      this.$refs.updateDictLabelForm.validate((valid) => {
        if (valid) {
          this.loading = true
          updateDictLabel(this.updateDictLabelForm).then(res => {
            if (res.code === 0) {
              this.updateVisible = false
              this.$message.success('修改成功')
              this.getList()
            } else {
              this.$message.warning(res.msg)
            }
            this.loading = false
          })
        }
      })
    },
    testDictLabel() {
      const host = process.env.ENV === 'production' ? getRootPath() : process.env.VUE_APP_BASE_API
      window.open(`${host}/cms/app/listDictLabel?type=${this.type}`)
    }
  }
}
</script>
<!--style标签必须使用scoped属性-->
<style lang="scss" scoped>
.dict{
  margin: 10px;
}
</style>
