<template>
  <div class="manage-container">
    <div class="manage-button">
      <el-button type="primary" size="small" @click="handleAdd()">
        添加
      </el-button>
      <el-button type="primary" size="small" @click="handleRelease()">
        发布
      </el-button>
      <el-button type="primary" size="small" @click="allDel()">
        全部删除
      </el-button>
    </div>
    <div class="manage-input">
      <el-table
        v-loading="listLoading"
        :data="tableData"
        stripe
        border
        row-key="name"
        :expand-row-keys="expands"
        style="width: 100%"
      >
        <el-table-column type="expand">
          <template #default="{ row }">
            <el-table :data="row.sub_button" stripe border style="width: 100%">
              <el-table-column label="二级菜单名称" prop="name">
                <template #default="scope">
                  <div v-if="!scope.row.isEdit">{{ scope.row.name }}</div>
                  <div v-else>
                    <el-input v-model="scope.row.name"></el-input>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="二级菜单类型" prop="type">
                <template #default="scope">
                  <div v-if="!scope.row.isEdit">
                    <div v-for="(item, index) in typeData" :key="index">
                      <span v-if="item.dataCode == scope.row.type">
                        {{ item.dataValue }}
                      </span>
                    </div>
                  </div>
                  <div v-else>
                    <el-select
                      v-model="scope.row.type"
                      filterable
                      placeholder="菜单类型"
                    >
                      <el-option
                        v-for="item in typeData"
                        :key="item.dataCode"
                        :label="item.dataValue"
                        :value="item.dataCode"
                      ></el-option>
                    </el-select>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="appid" prop="appid">
                <template #default="scope">
                  <div v-if="!scope.row.isEdit">{{ scope.row.appid }}</div>
                  <div
                    v-if="scope.row.isEdit && scope.row.type == 'miniprogram'"
                  >
                    <el-input v-model="scope.row.appid"></el-input>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="小程序路径" prop="path">
                <template #default="scope">
                  <div v-if="!scope.row.isEdit">{{ scope.row.pagepath }}</div>
                  <div
                    v-if="scope.row.isEdit && scope.row.type == 'miniprogram'"
                  >
                    <el-input v-model="scope.row.pagepath"></el-input>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="二级菜单url" prop="url">
                <template #default="scope">
                  <div v-if="!scope.row.isEdit">{{ scope.row.url }}</div>
                  <div v-else>
                    <el-input v-model="scope.row.url"></el-input>
                  </div>
                </template>
              </el-table-column>
              <el-table-column :label="$t('defalult.cz')" align="center">
                <template #default="scope">
                  <el-button
                    type="text"
                    @click.stop="handleEdit(scope.row, row.name)"
                  >
                    {{ scope.row.isEdit ? '完成' : '编辑' }}
                  </el-button>
                  <el-button type="text" @click="handleDelete(scope.row.name)">
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column label="一级菜单名称" prop="name">
          <template #default="{ row }">
            <div v-if="!row.isEdit">{{ row.name }}</div>
            <div v-else>
              <el-input v-model="row.name"></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="details"
          :label="$t('defalult.cz')"
          align="center"
        >
          <template #default="{ row }">
            <el-button type="text" @click.stop="handleEdit(row, '')">
              {{ row.isEdit ? '完成' : '编辑' }}
            </el-button>
            <el-button type="text" @click="handleDelete(row.name, 1)">
              删除
            </el-button>
            <el-button type="text" @click="handleTwoAdd(row.name, 1)">
              添加
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <add-menu ref="add"></add-menu>
    </div>
  </div>
</template>

<script>
import {
  getMenuList,
  delMenuRemove,
  getMenuType,
  addMenuPub,
} from '@/api/wechat';
import addMenu from './add';
export default {
  components: {
    addMenu,
  },
  data() {
    return {
      tableData: [],
      typeData: [],
      dialogTableVisible: false,
      lazy: true,
      listLoading: true,
      elementLoadingText: '正在加载...',
      queryForm: {},
      expands: [],
      isDel: false,
    };
  },
  created() {
    this.fetchData();
    this.getMenuTypeData();
  },
  methods: {
    handleEdit(row, name) {
      // 动态设置数据并通过这个数据判断显示方式
      row.isEdit = !row.isEdit;
      this.expands = [];
      if (name != '') {
        this.expands.push(name);
      }
      // if (!row.isEdit) {
      //   const { msg, code } = addMenuPub(this.tableData);
      //   if (code) {
      //     this.$message({
      //       type: 'error',
      //       message: msg == undefined ? '修改失败' : msg,
      //     });
      //   } else {
      //     this.$message({
      //       type: 'success',
      //       message: msg == undefined ? '修改成功' : msg,
      //     });
      //   }
      // }
    },
    async getMenuTypeData() {
      const { data } = await getMenuType();
      this.typeData = data;
    },
    async fetchData() {
      const { data } = await getMenuList();
      for (let i = 0; i < data.length; i++) {
        data[i].isEdit = false;
        for (let j = 0; j < data[i]['sub_button'].length; j++) {
          data[i]['sub_button'][j].isEdit = false;
        }
      }
      this.tableData = data;
      this.listLoading = false;
    },
    // 发布
    handleRelease() {
      // 删除多余字段
      this.tableData.forEach(function (v, k) {
        delete v.isEdit;
        v.sub_button.forEach(function (val, i) {
          delete val.isEdit;
        });
      });
      // 发布
      const { msg, code } = addMenuPub(this.tableData);
      if (code) {
        this.$message({
          type: 'error',
          message: msg == undefined ? '修改失败' : msg,
        });
      } else {
        this.$message({
          type: 'success',
          message: msg == undefined ? '修改成功' : msg,
        });
      }
    },
    handleTwoAdd(name, status) {
      const data = this.tableData;
      for (let i = 0; i < data.length; i++) {
        if (data[i].name == name) {
          data[i].sub_button.push({
            name: '',
            type: '',
            url: '',
            isEdit: true,
          });
        }
      }
      this.tableData = data;
      this.expands.push(name);
    },
    handleDelete(name, status) {
      this.$confirm('你确定要删除当前项吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          const data = this.tableData;
          var index = data.findIndex(item => {
            if (status == 1) {
              if (item.name == name) {
                return true;
              }
            } else {
              var index1 = item.sub_button.findIndex(items => {
                if (items.name == name) {
                  return true;
                }
              });
              item.sub_button.splice(index1, 1);
            }
          });
          if (status == 1) {
            data.splice(index, 1);
          }
          this.isDel = true;
          // const { msg } = delMenuRemove(data);
          // this.$message({
          //   type: 'success',
          //   message: msg == undefined ? '删除成功' : msg,
          // });
          this.tableData = data;
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          });
        });
    },
    allDel() {
      this.$confirm('你确定要全部删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          const { msg } = delMenuRemove();
          this.$message({
            type: 'success',
            message: msg == undefined ? '删除成功' : msg,
          });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          });
        });
    },
    handleAdd() {
      this.$refs['add'].showEdit();
    },
    deletes() {
      const ids = this.ids;
      if (ids.length == 0) {
        this.$message({
          type: 'info',
          message: '没有选中任何项',
        });
        return false;
      }
      this.deleteData(ids);
    },
    //删除
    deleteData(dis) {
      const that = this;
      this.$confirm('你确定要删除当前项吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          const { msg } = delMenuRemove(dis);
          this.$message({
            type: 'success',
            message: msg == undefined ? '删除成功' : msg,
          });
          setTimeout(function () {
            that.fetchData();
          }, 1000);
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          });
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.el-input {
  width: 200px !important;
}
.el-select {
  width: 200px !important;
}
.manage-button {
  margin-bottom: 30px;
}
</style>

<style lang="scss">
.el-submenu__title:hover {
  background-color: rgba(#1890ff, 0.085) !important;
  color: hsla(208, 100%, 55%, 0.95) !important;
}
.el-dialog {
  .el-dialog__header {
    background-color: #1890ff !important;
    padding: 15px 20px;
    text-align: left !important;
    .el-dialog__title {
      color: #e8f4ff !important;
    }
    .el-dialog__headerbtn .el-dialog__close {
      color: #e8f4ff !important;
    }
  }
  .el-dialog__body {
    padding: 20px !important;
    .el-form-item {
      margin-bottom: 10px !important;
      .el-input {
        width: 100% !important;
      }
      .el-select {
        width: 100% !important;
      }
      .el-cascader {
        width: 100% !important;
      }
    }
    .el-form-item:last-child {
      margin-bottom: 20px !important;
    }
  }
  .dialog-footer {
    text-align: right;
  }
}
</style>
