<template>
  <div class="data-list">
    <el-table
      :data="dataList"
      style="width: 100%"
      header-row-class-name="headerBg"
      empty-text="没有分类信息"
    >
      <el-table-column prop="id" label="ID" align="center" width="80" />
      <el-table-column
        prop="name"
        label="分类名称"
        align="center"
        min-width="180"
      />
      <el-table-column
        prop="created_at"
        label="创建时间"
        align="center"
        min-width="180"
      />
     <!--  <el-table-column
        prop="status"
        label="分类状态"
        align="center"
        min-width="180"
      >
        <template #default="scope">
          <div>
            {{ scope.row.status == 5 ? "启用" : "" }}
            {{ scope.row.status == 6 ? "停用" : "" }}
          </div>
        </template>
      </el-table-column> -->
      <el-table-column
        label="操作"
        fixed="right"
        align="center"
        min-width="150"
      >
        <template #default="scope">
          <div class="btns">
            <el-button
              type="primary"
              v-if="scope.row.edit"
              size="small"
              @click="btnEdit(scope.row)"
              ><svg-icon icon-class="edit" />编辑</el-button
            >
            <el-button
              type="danger"
              size="small"
              @click="onDelete(scope.row.id)"
              v-if="scope.row.delete"
              ><svg-icon icon-class="delete" />删除</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>

    <div class="page-info">
      <el-pagination
        :currentPage="queryForm.page"
        :page-size="queryForm.pageSize"
        :total="recordCount"
        :page-count="pageTotal"
        background
        layout="prev, pager, next"
        @current-change="ChangePage"
      >
      </el-pagination>
    </div>

    <el-dialog
      :visible.sync="dialogVisible"
      append-to-body
      v-el-drag-dialog
      width="50%"
      custom-class="prod-verify"
      title="修改原始数据分类 "
    >
      <!--  <dataInfo :id="currentDataId" @onClose="onClose"></dataInfo> -->
      <!-- 替换原有的 dataInfo 组件 -->
      <el-card>
        <el-form :model="dataForm" label-width="120px">
          <el-form-item label="分类名称:">
            <el-input
              v-model="dataForm.name"
              style="width: 300px"
              placeholder="请输入分类名称"
            ></el-input>
          </el-form-item>
        </el-form>
      </el-card>
      <div style="text-align: right; margin-top: 20px; margin-bottom: 20px">
        <el-button type="warning" @click="btnSave">确认保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  searchSourceDataCategory,
  deleteSourceDataCategory,
  getSourceDataCategoryInfo,
  createSourceDataCategory,
  updateSourceDataCategory,
} from "@/api/sourceData";
import {
  createAdminRole,
  updateAdminRole,
  getAdminRoleInfo,
} from "@/api/AdminRole";
import dataInfo from "./dataInfo.vue";
import elDragDialog from "@/directive/el-drag-dialog";
export default {
  components: {
    dataInfo,
  },
  directives: { elDragDialog },
  props: {
    queryForm: {
      type: Object,
      default: () => {
        return {
          page: 1,
          pageSize: 10,
          name: "",
          status: "",
        };
      },
    },
  },
  watch: {
    queryForm: {
      handler: function (val) {
        this.search();
      },
      immediate: true, //立即执行
      deep: true,
    },
  },
  data() {
    return {
      dialogVisible: false, //控制产品审核
      currentDataId: 0,
      recordCount: 0,
      pageTotal: 1,
      dataList: [],
      currentData: {},
      authorityList: [],
      dataForm: {
        // 新增
        name: "",
      },
    };
  },
  mounted() {
    this.search();
  },
  methods: {
    /* 保存新增 */
    // 新增保存方法
    btnSave() {
      let _this = this;
      if (_this.currentDataId) {
        updateSourceDataCategory({
          id: _this.currentDataId,
          ...this.dataForm,
        }).then(() => {
          if (res.status != 200) return;
          _this.dialogVisible = false;
          _this.$message.success("分类信息更新成功");
          _this.dataForm = {};
          _this.search();
        });
      } else {
        createSourceDataCategory(this.dataForm).then(() => {
          if (res.status != 200) return;
          _this.dialogVisible = false;
          _this.$message.success("分类信息创建成功");
          _this.dataForm = {};
          _this.search();
        });
      }
    },
    authority() {
      getAdminRoleInfo({ id: this.$store.state.user.roleInfo.id }).then(
        (res) => {
          this.authorityList = res.data;
        }
      );
    },
    onFocusVal(e) {
      let _this = this;
      _this.currentDataId = e.target.dataset.id;
    },

    onChangeVal(e) {
      let _this = this;
      let par = {
        id: _this.currentDataId,
        val: e,
      };
    },

    onClose() {
      let _this = this;
      _this.dialogVisible = false;
      _this.search();
    },

    onDelete(e) {
      let _this = this;
      let par = {
        id: e,
      };
      // console.log("para",par);
      _this
        .$confirm("您是否确认删除该记录？", "提示", {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then((res) => {
          // console.log("AAA")
          deleteSourceDataCategory(par).then((res) => {
            _this.search();
          });
        })
        .catch(() => {});
    },
    //编辑
    btnEdit(e) {
      let _this = this;
      _this.dataForm.name=e.name
      _this.currentDataId = e.id;
      _this.dialogVisible = true;
    },
    handleClose() {
      let _this = this;
      _this.currentData = {};
      _this.dialogVisible = false;
    },
    //搜索
    search() {
      let _this = this;
      searchSourceDataCategory(_this.queryForm).then((res) => {
        if (!res) return;
        if (this.$store.state.user.name == "admin") {
          res.data.sourcecategories.forEach((el) => {
            _this.$set(el, "edit", true);
            _this.$set(el, "delete", true);
          });
        } else {
          getAdminRoleInfo({ id: this.$store.state.user.roleInfo.id }).then(
            (responese) => {
              if (!responese) return;
              responese.data.source_cate_auth.forEach((item) => {
                res.data.sourcecategories.forEach((el) => {
                  if (item.id === el.id) {
                    _this.$set(el, "edit", true);
                    _this.$set(el, "delete", true);
                  } else {
                    _this.$set(el, "edit", false);
                    _this.$set(el, "delete", false);
                  }
                });
              });
            }
          );
        }
        _this.dataList = res.data.sourcecategories;
        console.log(_this.dataList);
        _this.recordCount = res.data.total;
        _this.pageTotal = res.data.totalPage;
      });
    },
    //修改分页
    ChangePage(e) {
      let _this = this;
      _this.queryForm.page = e;
      _this.search();
    },
  },
};
</script>

<style lang="scss">
@import "./dataList.scss";
</style>
