<template>
  <div class="ghzc ResourceShare sharedLocation">
    <div class="innerContainer" v-drag>
      <custom-form ref="formRef" :model="model" :config="formConfig">
        <template #type>
          <el-select v-model="model.type" placeholder="申请状态">
            <el-option
              v-for="item in servicetype"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            >
            </el-option>
          </el-select>
        </template>
        <template #action>
          <!-- v-hasPermi="['monitor:job:add']" -->
          <el-button size="mini" @click="getTableData">查询</el-button>
          <el-button size="mini" @click="reset()">重置</el-button>
        </template>
      </custom-form>
      <!-- :total="table.total"
    :tableArrDate="table.data" -->
      <customForm></customForm>
      <tablePage
        class="tablePage"
        :cloumn="cloumn"
        :table="table"
        :indexed="false"
        :showTotal="false"
        ref="tableDialogRef"
        @currentChange="searchFun"
        :treeProps="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <template #type="{ row }">
          {{ sertypeMap[row.type] || "-" }}
        </template>
        <template #shared="{ row }">
          <el-checkbox
            v-if="row.url"
            v-model="row.checked"
            @change="changeShare(row)"
          >
            共享
          </el-checkbox>
        </template>
        <template #action="{ row }">
          <span class="usable" v-if="row.url" @click="fieldset(row)"
            >共享字段设置</span
          >
        </template>
      </tablePage>
    </div>
    <fieldSet ref="fieldSetModal" @close="closeMdel"></fieldSet>
  </div>
</template>

<script>
// import Clipboard from "clipboard";
import tablePage from "@/components/mapView/tablePage.vue";
import customForm from "@/components/mapView/custom-form.vue";
import fieldSet from "./components/fieldSetModal.vue";
import { FormConfig, TableHeader } from "./config";
import { listZyml, shareZyml } from "@/api/shared.js";
import { handleTree } from "@/utils/ruoyi.js";
import { Getservicetype } from "../myApplication/config";
export default {
  components: {
    tablePage,
    customForm,
    fieldSet,
  },
  props: {},
  data() {
    return {
      model: {
        startTime: "",
        endTime: "",
        sj: ["", ""],
        type: "",
        state: null,
        year: null,
      },
      formConfig: FormConfig,
      cloumn: TableHeader,
      servicetype: [],
      sertypeMap: {},
      table: { data: [], total: 0 },
    };
  },
  methods: {
    searchFun(page) {
      this.getTableData(page);
    },
    /** 查询数据资源目录列表 */
    async getTableData(page = { pageIndex: 1, size: 10 }) {
      // this.model.pageNum = page.pageIndex;
      // this.model.pageSize = page.size;
      this.model.startTime = this.model.sj[0];
      this.model.endTime = this.model.sj[1];
      let res = await listZyml(this.model);

      this.table = {
        data: handleTree(res.data, "bsm", "pbsm"),
        total: 0,
      };
    },
    reset() {
      this.model = {
        startTime: "",
        endTime: "",
        sj: ["", ""],
        type: "",
        state: null,
        year: null,
        // pageNum: 1,
        // pageSize: 10,
      };
      this.searchFun();
    },
    // 详情
    fieldset(row) {
      this.$refs.fieldSetModal.Init(row);
    },
    changeShare(row) {
      shareZyml({ id: row.bsm }).then((res) => {
        this.$message.success("共享状态切换成功！");
        this.searchFun();
      });
    },
    closeMdel() {
      this.searchFun();
    },
  },
  computed: {},
  watch: {},
  async mounted() {
    this.servicetype = await Getservicetype();
    this.servicetype.forEach((ty) => {
      this.sertypeMap[ty.dictValue] = ty.dictLabel;
    });
    console.log("--s-s--s", this.sertypeMap);
    this.searchFun();
  },
};
</script>
<style lang="scss" scoped>
@import "../resource.scss";
.el-checkbox {
  color: #fff;
}
</style>
<style lang="scss">
@import "../../cockpit/datePicker.scss";
.sharedLocation {
  .el-table {
    overflow-y: auto;
    overflow-x: hidden;
  }
}
</style>