<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
  <div class="app-container">
    <router-view/>
    <div class="header boxShadow">
      <div class="header-title">数据字典</div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="枚举名称" prop="enumName">
          <el-input v-model="formInline.enumName" placeholder="请输入" clearable></el-input>
        </el-form-item>
        <el-form-item label="枚举编码" prop="enumCode">
          <el-input v-model="formInline.enumCode" placeholder="请输入" clearable></el-input>
        </el-form-item>
        <el-form-item class="fr">
          <el-button @click="search">查询</el-button>
          <el-button type="primary" @click="handleAdd">新增</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 使用vant收缩组件 -->
    <van-list>
      <div class="list boxShadow">
        <div class="list-main">
          <div class="list-content">
            <van-collapse v-model="activeNames" v-for="(item, index) in list" :key="index">
              <div class="list-title">{{ item.title }}</div>
              <van-collapse-item :name="index">
                <!-- 自定义标题内容 (#title === v-slot:title) -->
                <!--<template #title>-->
                <template v-slot:title>
                  <van-row class="content-1">
                    <van-col span="6">枚举名称: <span>{{item.enumName}}</span></van-col>
                    <van-col span="6">枚举编码：<span>{{item.enumCode}} </span></van-col>
                    <van-col span="6">国际编码: <span>{{item.internationalCode}} </span></van-col>
                    <van-col span="6" class="list-btns">
                      <el-button type="primary" @click="handleEdit(item)">修改</el-button>
                      <el-button type="primary" @click="handleDelete(item)">删除</el-button>
                    </van-col>
                  </van-row>
                </template>
                <!-- 展开部分的样式 -->
                <div v-for="(value, ind) in item.children" :key="ind" class="children">
                  <van-row class="content-1">
                    <van-col span="6">枚举名称: <span>{{value.enumName}}</span></van-col>
                    <van-col span="6">枚举编码：<span>{{value.enumCode}} </span></van-col>
                    <van-col span="6">国际编码: <span>{{value.internationalCode}} </span></van-col>
                    <van-col span="6" class="list-btns">
                      <el-button type="primary" @click="handleEdit(value)">修改</el-button>
                      <el-button type="primary" @click="handleDelete(value)">删除</el-button>
                    </van-col>
                  </van-row>
                </div>
                <div class="" v-if="!item.children || item.children.length <= 0">
                  <p :style="{ fontSize: '.3rem' }">暂无数据</p>
                </div>
              </van-collapse-item>
            </van-collapse>
          </div>
        </div>
      </div>
    </van-list>
    <div class="pagination-container">
      <el-pagination class="right" background :current-page.sync="listQuery.page" :page-size="listQuery.limit"
                     :page-sizes="[5, 10, 20, 30]" :total="listQuery.total" @size-change="sizeChange"
                     @current-change="pageChange" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
    </div>
    <!-- ------------------------编辑页(下)-------------------- -->
    <el-dialog :title="diaTitle" width="30%" :visible.sync="dialogFormVisible" center :destroy-on-close='true'
               @close='close'>
      <el-form :model="diaForm" :label-width="formLabelWidth" ref="diaForm">
        <el-form-item label="枚举名称" prop="enumName">
          <el-input v-model="diaForm.enumName" autocomplete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="上级">
          <el-select v-model="diaForm.parentId" style="width:100%">
            <el-option v-for="p in parents" :key="p.id" :label="p.enumName" :value="p.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="枚举编码" prop="enumCode">
          <el-input v-model="diaForm.enumCode" autocomplete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="国际编码" prop="internationalCode">
          <el-input v-model="diaForm.internationalCode" autocomplete="off" placeholder="请输入"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save()" v-if="isAdd">保 存</el-button>
        <el-button type="primary" @click="update()" v-if="!isAdd">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    getEnumList,
    deleteEnumItem,
    addEnumItem,
    updateEnumItem,
    getParentsList
  } from '@/api/equipConfig/dataDictionary/index'

  export default {
    filters: {},
    data() {
      return {
        value: '',
        activeNames: [''], // 默认展开的项 默认不展开
        notice: false,
        formInline: {
          enumName: '',
          enumCode: '',
        },
        list: [{}],
        loading: 'false',
        finished: 'false',
        isAdd: false,
        diaTitle: '新增字典项',
        dialogFormVisible: false,
        diaForm: {
          id: '',
          enumName: '',
          enumCode: '',
          parentId: '',
          internationalCode: '',
          children: []
        },
        parents: [],
        formLabelWidth: '100px',
        listQuery: {
          condition: "",
          page: 1,
          limit: 10,
          total: 10,
        },
      }
    },
    created() {

    },
    mounted() {
      this.getList()
    },
    methods: {
      search() {
        this.getList()
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      getList() {
        let condition = {
          enumName: this.formInline.enumName.trim(),
          enumCode: this.formInline.enumCode,
        };
        let data = {
          pageIndex: this.listQuery.page,
          pageSize: this.listQuery.limit,
          condition: JSON.stringify(condition)
        };
        getEnumList(data).then(res => {
          if (res.code === 200) {
            this.list = res.data.records;
            this.listQuery.limit = res.data.size;
            this.listQuery.total = res.data.total;
          }
        }).catch(err => {
          console.log(err)
        })
      },
      handleDelete(data) {
        this.$confirm('此操作将删除该条数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteEnumItem(data.id).then(res => {
            // console.log(res, 'delete')
            if (res.code == 200) {
              // this.loading = false
              this.getList()
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            } else {
              // this.loading = false
            }
          })
        }).catch(() => {
          // this.loading = false
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      save() {
        let data = JSON.parse(JSON.stringify(this.diaForm))
        addEnumItem(data).then(res => {
          console.log(res, 'addEnumItem')
          if (res.code == 200) {
            this.dialogFormVisible = false
            this.getList()
          }
        }).catch(err => {
          console.log(err)
        })
      },
      update() {
        let data = JSON.parse(JSON.stringify(this.diaForm))
        updateEnumItem(data).then(res => {
          if (res.code == 200) {
            this.dialogFormVisible = false
            this.getList()
          }
        }).catch(err => {
          console.log(err)
        })
      },
      handleAdd() {
        this.ThisGetParentsList();
        if (this.diaTitle != '新增字典项') {
          this.diaTitle = '修改字典项';
        }
        this.isAdd = true;
        this.dialogFormVisible = true;
      },
      handleEdit(data) {
        this.ThisGetParentsList();
        this.isAdd = false;
        this.diaTitle = '修改字典项';
        this.diaForm = JSON.parse(JSON.stringify(data));
        this.dialogFormVisible = true;
      },
      ThisGetParentsList() {
        getParentsList().then(res => {
          if (res.code === 200) {
            this.parents = res.data;
          }
        }).catch(err => {
          console.log(err)
        });
      },
      close() {
        // this.$refs["diaForm"].resetFields()
        this.$nextTick(() => {
          this.$refs["diaForm"].resetFields()
        })
      },
      sizeChange(v) {
        this.listQuery.limit = v
        console.log(`每页 ${v} 条`);
        this.list.splice(v, this.list.length - 1)
        this.getList()
      },
      pageChange(v) {
        this.listQuery.page = v
        console.log(`当前页: ${v}`);
        this.getList()
      },
    }
  }
</script>
<style lang='scss' scoped>
  .boxShadow {
    box-shadow: 5px -5px 10px -4px #efe3e3, -5px 5px 10px -4px #efe3e3;
  }

  ::v-deep .van-notice-bar {
    font-weight: 600;
    padding: 0;
    cursor: pointer;
  }

  .header {
    background-color: #fff;
    border-radius: 15px;
    padding: 15px;
    // height: 160px;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .header-title {
      font-size: 14px;
      font-weight: 600;
      padding-left: 10px;
      border-left: 4px solid #5283e7;
    }
    .van-notice-bar {
      padding: 10px 0 10px 0;
    }
    .el-form {
      .el-form-item {
        margin-bottom: 0;
      }
      .fr {
        float: right;
      }
    }
  }

  .list {
    background-color: #fff;
    border-radius: 15px;
    margin-top: 10px;
    .list-main {
      padding-left: 15px;
      margin-top: 15px;
      display: flex;
      justify-content: space-between;
      .list-title {
        font-size: 15px;
        font-weight: 700;
        padding: 10px 0;
      }
      .list-content {
        width: 100%;
        padding: 0 10px 10px 5px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .content-1 {
          font-size: 13px;
          display: flex;
          justify-content: space-between;
          margin-top: 10px;
          // padding: 5px 0;
          strong {
            color: #d24848;
          }
          .text-colorc {
            color: #b8b8b8;
          }
        }
        .content-1:nth-last-child(1) {
          padding-bottom: 10px;
        }
      }
      .list-btns {
        width: 22%;
        background-color: transparent;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
      }
    }
  }

  .textFlow {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>
