<template>
  <div class="app-container">
    <!--操作区-->
    <el-button v-if="checkRole([1,2])" type="primary" icon="el-icon-plus" class="margin-left" @click="create">添加标签</el-button>
    <!--搜索区-->
    <template v-if="checkRole([1])">
      <el-select v-model="page" placeholder="请选择省份" class="margin-left">
        <el-option
          v-for="item in province_list"
          :key="item.areaCodeId"
          :label="item.name"
          :value="item.areaCodeId"
        />
      </el-select>
      <el-button type="primary" icon="el-icon-search" class="margin-left" @click="fetchData">搜索</el-button>
    </template>
    <!--主表格-->
    <el-table
      ref="table_form"
      v-loading="listLoading"
      class="table"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column label="序号" align="center" width="80px">
        <template slot-scope="scope">
          {{ scope.$index+1 }}
        </template>
      </el-table-column>
      <el-table-column label="名称" align="center">
        <template slot-scope="scope">
          {{ scope.row.name | matchNull }}
        </template>
      </el-table-column>
      <el-table-column label="所属省份" align="center">
        <template slot-scope="scope">
          {{ scope.row.provinceName | matchNull }}
        </template>
      </el-table-column>
      <el-table-column v-if="checkRole([2])" align="center" label="操作区" width="200">
        <template slot-scope="scope">
          <el-button type="danger" size="small" @click="deleteUser(scope.row.id)">删除</el-button>
          <el-button type="primary" size="small" @click="update(scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页栏-->
    <!--    <pagination :total="total" :page.sync="page.pageNum" :limit.sync="page.pageSize" @pagination="fetchData" />-->
    <!--对话框-->
    <el-dialog :title="dialogTitle[dialogType]" :visible.sync="dialogVisible" width="600px">
      <el-form ref="user_form" :model="user_form" :rules="rules" label-width="120px" label-position="left">
        <el-form-item label="省" prop="provinceId" label-width="120px">
          <el-select v-model="user_form.provinceId" placeholder="请选择省份" :disabled="!checkRole([1])">
            <el-option
              v-for="item in province_list"
              :key="item.areaCodeId"
              :label="item.name"
              :value="item.areaCodeId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="标签名称" prop="name">
          <el-input
            v-model.trim="user_form.name"
            maxlength="11"
            show-word-limit
          />
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="dialogType === 'add'?add():doUpdate()">
          确定
        </el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { getProvince, getTagList, insert, update, deleteTag } from '@/api/user_manage' // secondary package based on el-pagination
import { checkRole } from '@/utils/checkRole'

export default {
  components: { Pagination },
  filters: {
    matchNull(str) {
      if (!str) {
        return '未连接'
      } else {
        return str
      }
    }
  },
  data() {
    return {
      // 主表格&主表格加载状态
      list: null,
      listLoading: true,
      // 是否显示对话框
      dialogVisible: false,
      // 对话框标题
      dialogTitle: {
        add: '添加标签',
        update: '编辑标签'
      },
      dialogType: 'add',
      // 添加账号参数
      user_form: {
        provinceId: null,
        name: null
      },
      user_form_copy: {},
      // 分页参数
      page: '',
      // 省列表
      province_list: [],
      // 验证规则
      rules: {
        name: [
          { required: true, message: '请输入标签名称', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        provinceId: [
          { required: true, message: '请选择省', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    if (checkRole([2])) {
      this.user_form.provinceId = this.$store.getters.provinceId
    }
    this.user_form_copy = JSON.parse(JSON.stringify(this.user_form))
    this.fetchData()
    this.getAddressList()
  },
  methods: {
    // 查询权限
    checkRole,
    // 获取列表数据
    fetchData() {
      this.listLoading = true
      getTagList(this.page).then(res => {
        this.list = res.data
        this.listLoading = false
      })
    },
    // 获得省市县列表
    getAddressList() {
      getProvince().then(res => {
        this.province_list = res.data
      })
    },
    // 打开添加标签对话框
    create() {
      this.user_form = JSON.parse(JSON.stringify(this.user_form_copy))
      this.dialogType = 'add'
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs['user_form'].clearValidate()
      })
    },
    // 确定添加
    add() {
      this.$refs['user_form'].validate((valid) => {
        if (valid) {
          insert(this.user_form).then(res => {
            this.dialogVisible = false
            this.fetchData()
            this.$message({
              type: 'success',
              message: '添加成功!'
            })
          })
        }
      })
    },
    // 删除账号
    deleteUser(id) {
      this.$confirm('确定要删除此类别吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        deleteTag(id).then((res) => {
          this.fetchData()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
      })
    },
    // 打开编辑
    update(row) {
      this.user_form = Object.assign(this.user_form, row)
      this.dialogType = 'update'
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs['user_form'].clearValidate()
      })
    },
    // 确定编辑
    doUpdate() {
      this.$refs['user_form'].validate((valid) => {
        if (valid) {
          update(this.user_form).then(res => {
            this.dialogVisible = false
            this.fetchData()
            this.$message({
              type: 'success',
              message: '编辑成功!'
            })
          })
        }
      })
    }
  }
}
</script>
<style scoped>
  .table{
    margin-top: 15px;
  }
  .flex {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .margin-left {
    margin: 10px 0 0 10px;
  }
  .input {
    width: 200px;
  }
</style>
