<!--
 * @Author: your name
 * @Date: 2022-01-08 10:36:06
 * @LastEditTime: 2022-01-19 15:49:13
 * @LastEditors: Please set LastEditors
 * @Description: 基础资料 - 档案管理
 * @FilePath: \goldenPig\src\views\basic-data\archives-admin\ArchivesAdmin.vue
-->
<template>
  <div class="individual-data">
    <search-cpn
      v-bind="searchConfig"
      @handleSearch="handleSearchEvent"
      @clearEvent="handleClearEvent"
    >
      <!-- 位置 -->
      <template #location="scope">
        <el-cascader
          :options="options"
          v-model="searchForm2.location"
          :props="{ checkStrictly: true }"
          :placeholder="scope.item.placeholder"
          style="width: 100%"
          clearable
        >
        </el-cascader>
      </template>
    </search-cpn>

    <table-cpn
      v-bind="tableConfig"
      @handleAddOrEdit="handleAddOrEditEvent"
      :searchForm="searchForm"
    >
      <!-- 类型 -->
      <template #type="scope">
        {{ types[scope.row.type - 1] }}
      </template>

      <!-- 位置 -->
      <template #location="scope">
        <span v-location="{ data: scope.row.location }"></span>
      </template>
    </table-cpn>

    <modal-cpn ref="modal" v-bind="modalConfig" :otherParams="modalForm2">
      <!-- 位置 -->
      <template #location="scope">
        <el-cascader
          :options="options"
          :value="location"
          @change="submitLocation"
          :placeholder="scope.item.placeholder"
          style="width: 100%"
        >
        </el-cascader>
      </template>
    </modal-cpn>
  </div>
</template>
<script>
// 搜索
import SearchCpn from "@/components/search-cpn";
import { formItemProp } from "./config/search.config";
import { regionData, CodeToText, TextToCode } from "element-china-area-data";

// 表格
import TableCpn from "@/components/table-cpn";
import { propList } from "./config/table.config";

// 新增 or 编辑
import ModalCpn from "@/components/modal-cpn";
import { modalItemProp } from "./config/modal.config";

import {
  baseFarmList,
  baseFarmAdd,
  baseFarmEdit,
  baseFarmDel,
} from "@/utils/apis/basic-data/archivesAdmin.js";

import { mapActions } from "vuex";

export default {
  components: {
    SearchCpn,
    TableCpn,
    ModalCpn,
  },
  data() {
    return {
      // 搜索
      searchConfig: {},
      searchForm1: {
        farmName: undefined,
        type: undefined,
      },
      searchForm2: {
        location: [],
      },
      options: regionData,
      searchForm: {
        farmName: undefined,
        type: undefined,
        location: undefined,
      },
      // 表格
      tableConfig: {},
      tableDataList: [],
      types: ["屠宰企业", "养殖企业", "检疫机构"],
      // 新增 or 编辑
      modalConfig: {},
      modalForm1: {
        farmName: undefined,
        type: undefined,
      },
      location: [],
      modalForm2: {
        location: "",
      },
    };
  },
  created() {
    this.searchConfig = { formItemProp, searchForm: this.searchForm1 };
    this.tableConfig = {
      propList,
      permission: "archivesAdmin",
      requests: {
        list: baseFarmList,
        del: baseFarmDel,
        others: [this.GetFarm],
      },
      tableStyle: {
        height: 500,
      },
    };
    this.modalConfig = {
      modalItemProp,
      modalForm: this.modalForm1,
      requests: {
        add: baseFarmAdd,
        edit: baseFarmEdit,
      },
    };
  },
  methods: {
    ...mapActions(["GetFarm"]),
    // 查询按钮 - 获取参数
    handleSearchEvent(params) {
      this.searchForm = {
        ...params,
        location: this.searchForm2.location.join(","),
      };
    },
    // 清空数据
    handleClearEvent() {
      this.searchForm2.location = [];
    },
    // 模态框的 位置
    submitLocation(val) {
      this.modalForm2.location = val.join();
    },
    // 新增 or 编辑事件
    handleAddOrEditEvent(row) {
      this.$refs["modal"].init(row);
      if (row.id) {
        this.location = row.location.split(",");
        this.modalForm2.location = row.location;
      } else {
        this.location = [];
        this.modalForm2.location = "";
      }
    },
  },
  watch: {
    // "searchForm2.location": {
    //   handler(newVal) {
    //     if (typeof newVal === "object") {
    //       this.searchForm2.location = newVal.join();
    //     }
    //   },
    //   deep: true,
    // },
  },
};
</script>
<style scoped></style>
