<template>
  <div class="page-wrapper role-add">
    <div class="page-container">
      <a-form-model
        ref="addForm"
        :model="addForm"
        :rules="rules"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 18 }"
        class="addForm"
      >
        <a-collapse
          v-model="activeName"
          :bordered="false"
          expand-icon-position="right"
          class="collapse-header-divide"
        >
          <a-collapse-panel key="a" :header="$t('BASE_INFO')">
            <a-row style="margin-left: 90px">
              <a-col :span="7">
                <a-form-model-item :label="$t('CLIENT_TYPE')" prop="type">
                  <a-select
                    v-model="addForm.type"
                    style="width: 100%"
                    :placeholder="$t('PLACEENTER')"
                  >
                    <a-select-option
                      v-for="item in typeList"
                      :key="item.value"
                      :value="item.value"
                    >
                      {{ item.label }}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :span="7" :offset="2">
                <a-form-model-item :label="$t('CLIENT_CODE')" prop="deviceId">
                  <a-input v-model="addForm.deviceId" disabled />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row style="margin-left: 90px">
              <!-- <a-col :span="7">
                <a-form-model-item
                  :label="$t('CLIENT_NAME')"
                  prop="terminalName"
                >
                  <a-input
                    v-model="addForm.terminalName"
                    :placeholder="$t('PLACEENTER')"
                  />
                </a-form-model-item>
              </a-col> -->
              <a-col :span="7">
                <a-form-model-item :label="$t('MAC_ADDRESS')" prop="mac">
                  <a-input
                    v-model="addForm.mac"
                    :placeholder="$t('PLACEENTER')"
                  />
                </a-form-model-item>
              </a-col>
              <a-col :span="7" :offset="2">
                <a-form-model-item :label="$t('IP_ADDRESS')">
                  <a-input
                    v-model="addForm.ip"
                    :placeholder="$t('PLACEENTER')"
                  />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row style="margin-left: 90px">
              <a-col :span="7">
                <a-form-model-item
                  :label="$t('BINDING_STATION')"
                  prop="stationName"
                >
                  <a-input
                    v-model="addForm.stationName"
                    allow-clear
                    @click.stop="() => handStation()"
                  ></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="7" :offset="2">
                <a-form-model-item :label="$t('ACTIVATE')" prop="enableFlag">
                  <a-switch v-model="addForm.enableFlag" />
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-collapse-panel>
        </a-collapse>
      </a-form-model>
    </div>
    <div class="page-bottom-op">
      <a-button type="primary" @click="confirm()">
        <Icon type="icon-cur-save_1" :size="18" /> {{ $t("SAVE") }}
      </a-button>
      <a-button style="margin-left: 20px" @click="cancel()">
        <Icon type="icon-dir-f-rollback" :size="18" /> {{ $t("CANCEL") }}
      </a-button>
    </div>
    <MegaModal
      width="50%"
      :visible="drawerVisible"
      :title="$t('STATION_ADD')"
      @cancel="stationCancel"
    >
      <a-form-model
        ref="formStation"
        :model="formStation"
        :rules="rules"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 16 }"
      >
        <a-row>
          <a-col :span="7">
            <a-form-model-item :label="$t('FACTORY')" prop="siteCode">
              <a-select
                v-model="formStation.siteCode"
                allow-clear
                @change="() => factoryChange()"
              >
                <a-select-option
                  v-for="(item, index) in factoryList"
                  :key="index"
                  :value="item.siteCode"
                >
                  {{ item.siteName }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="7">
            <a-form-model-item :label="$t('FAC_SHOP')" prop="fabId">
              <a-select
                v-model="formStation.fabId"
                allow-clear
                @change="() => workshopChange()"
              >
                <a-select-option
                  v-for="(item, index) in workshopList"
                  :key="index"
                  :value="item.fabId"
                >
                  {{ item.fabName }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="7">
            <a-form-model-item :label="$t('AREA')" prop="areaId">
              <a-select
                v-model="formStation.areaId"
                allow-clear
                @change="() => regionChange()"
              >
                <a-select-option
                  v-for="(item, index) in regionList"
                  :key="index"
                  :value="item.id"
                >
                  {{ item.areaName }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="7">
            <a-form-model-item :label="$t('LINE_BODY')" prop="lineId">
              <a-select
                v-model="formStation.lineId"
                allow-clear
                :placeholder="$t('PLACEENTER')"
                @change="() => lineChange()"
              >
                <a-select-option
                  v-for="item in lineList"
                  :key="item.id"
                  :value="item.id"
                >
                  {{ item.lineName }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="7">
            <a-form-model-item :label="$t('PRODUCTION_PROCESS')" prop="opId">
              <a-select
                v-model="formStation.opId"
                allow-clear
                :placeholder="$t('PLACEENTER')"
                @change="() => opNameChange()"
              >
                <a-select-option
                  v-for="item in opCodeList"
                  :key="item.id"
                  :value="item.id"
                >
                  {{ item.opName }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
      <MomTable
        ref="tableData"
        row-key="stationCode"
        :columns="tableColumns"
        :data-source="tableData"
        :page.sync="page"
        :total="total"
        :mega-extend="{
          rowAction: false,
        }"
        :row-selection="rowSelection"
      />
      <template slot="footer">
        <a-button type="primary" @click="stationSave()">
          <Icon type="icon-cur-save_1" :size="18" /> {{ $t("SAVE") }}
        </a-button>
        <a-button style="margin-left: 20px" @click="stationCancel()">
          <Icon type="icon-dir-f-rollback" :size="18" /> {{ $t("CANCEL") }}
        </a-button>
      </template>
    </MegaModal>
  </div>
</template>

<script>
import { Modal as MegaModal, Icon } from "@mega-design/ui-vue";
import ApiConstant from "@/api/ApiConstant";

export default {
  components: { MegaModal, Icon },
  data() {
    return {
      activeName: "a",
      checkedCities: [],
      typeList: [],
      cities: [],
      effectiveList: [],
      sortParams: null,
      tableData: [], // 工位列表的数据存储
      drawerVisible: false,
      factoryList: [], // 厂区下拉存的值
      workshopList: [], // 车间下拉存的值
      regionList: [], // 区域下拉存的值
      lineList: [], // 线别下拉存的值
      opCodeList: [],
      formStation: {
        siteCode: "",
        fabId: "",
        areaId: "",
        lineId: "",
        opCode: "",
      },
      total: 0,
      page: 1,
      fileAll: [],
      addForm: {
        type: "", // 终端类型
        deviceId: "", // 终端编码
        // terminalName: "", // 终端名称
        mac: "", // MAC地址
        ip: "", // IP地址
        stationCode: "", // 绑定工位的id
        stationId: "", // 绑定工位
        stationName: "",
        enableFlag: false, // 是否激活
      },
    };
  },
  computed: {
    rules() {
      return {
        type: [
          {
            required: true,
            message: this.$t("PLACEENTER"),
            trigger: "blur",
          },
        ],
        // terminalName: [
        //   {
        //     required: true,
        //     message: this.$t("PLACEENTER"),
        //     trigger: "change",
        //   },
        // ],
        mac: [
          {
            required: true,
            message: this.$t("PLACEENTER"),
            trigger: "change",
          },
        ],
        stationName: [
          {
            required: true,
            message: this.$t("PLACEENTER"),
            trigger: "blur",
          },
        ],
        enableFlag: [
          {
            required: true,
            message: this.$t("PLACEENTER"),
            trigger: "change",
          },
        ],
        deviceId: [
          {
            required: true,
            message: this.$t("PLACEENTER"),
            trigger: "blur",
          },
        ],
      };
    },
    tableColumns() {
      return [
        {
          dataIndex: "opName",
          title: this.$t("PRODUCTION_PROCESS"),
        },
        {
          dataIndex: "stationName",
          title: this.$t("FAC_STATION"),
        },
        {
          dataIndex: "stationCode",
          title: this.$t("STATION_CODE"),
        },
      ];
    },
    rowSelection() {
      return {
        type: "radio",
        onChange: (selectedRowKeys, data) => {
          this.selectedRowKeys = selectedRowKeys;
          this.fileAll = data;
        },
      };
    },
  },
  created() {
    // 调取厂区接口
    this.$axios
      .get(`${ApiConstant.PREFIX_CORE}/api/mdm/fac-site/list`)
      .then((res) => {
        this.factoryList = res.data.data;
      });

    // DIC:ESOP:BASE_TERMINAL_TYPE 终端类型
    this.getDictByCode("DIC:ESOP:BASE_TERMINAL_TYPE").then((res) => {
      this.typeList = res.data.data;
    });
    if (this.$route.query.id) {
      // 根据id查询详情信息
      this.$axios
        .get(
          `${ApiConstant.PREFIX_CORE}/api/sys/app-terminal/find-by-mac/${this.$route.query.id}`
        )
        .then((res) => {
          this.addForm = res.data.data;
          if (this.addForm.enableFlag === "Y") {
            this.addForm.enableFlag = true;
          } else {
            this.addForm.enableFlag = false;
          }
        });
    }
  },
  methods: {
    getDate() {
      this.$axios
        .get(`/core/api/station/listOfUnbindEsopClient`, {
          params: this.formStation,
        })
        .then((res) => {
          this.tableData = res.data.data;
        });
    },
    getTemplateRow(row) {
      // this.stationObj = row
    },
    // 厂区发生改变车间接口
    factoryChange() {
      this.$axios
        .get(
          `${ApiConstant.PREFIX_CORE}/api/mdm/fac-fab/list-all-by-site-code?siteCode=${this.formStation.siteCode}`
        )
        .then((res) => {
          this.workshopList = res.data.data;
        });
      this.formStation.fabId = "";
      this.formStation.areaId = "";
      this.formStation.lineId = "";
      this.formStation.opCode = "";
      this.regionList = [];
      this.lineList = [];
      this.page = 1;
      this.getDate();
    },
    // 车间发生改变区域接口
    workshopChange() {
      this.$axios
        .get(
          `${ApiConstant.PREFIX_CORE}/api/mdm/fac-area/list-all-by-fab-id?fabId=${this.formStation.fabId}`
        )
        .then((res) => {
          this.regionList = res.data.data;
        });
      this.formStation.areaId = "";
      this.formStation.lineId = "";
      this.lineList = [];
      this.page = 1;
      this.getDate();
    },
    // 区域改变查询线别接口
    regionChange() {
      this.$axios
        .get(
          `${ApiConstant.PREFIX_CORE}/api/mdm/fac-line/list-all-by-area-id?areaId=${this.formStation.areaId}`
        )
        .then((res) => {
          this.lineList = res.data.data;
        });
      this.formStation.lineId = "";
      this.page = 1;
      this.getDate();
    },
    // 线别接口改变查询工位接口
    lineChange() {
      this.page = 1;
      this.getDate();
    },
    opNameChange() {
      this.page = 1;
      this.getDate();
    },
    // 接收工位的新增图标的点击
    handStation() {
      this.drawerVisible = true;
      // 查询工序下拉
      this.$axios
        .get(`${ApiConstant.PREFIX_CORE}/api/mdm/op/list`)
        .then((res) => {
          this.opCodeList = res.data.data;
        });
      this.$axios
        .get(`${ApiConstant.PREFIX_CORE}/api/mdm/fac-station/list-all`, {
          params: this.formStation,
        })
        .then((res) => {
          this.tableData = res.data.data;
        });
    },
    // 工位弹框里面的保存
    stationSave() {
      if (this.fileAll.length > 0) {
        this.drawerVisible = false;
        this.fileAll.forEach((item) => {
          this.addForm.stationId = item.stationCode;
          this.addForm.stationName = item.stationName;
        });
        this.workshopList = [];
        this.regionList = [];
        this.lineList = [];
        this.opCodeList = [];
        this.$refs.formStation.resetFields();
      }
    },
    stationCancel() {
      this.drawerVisible = false;
      this.workshopList = [];
      this.regionList = [];
      this.lineList = [];
      this.opCodeList = [];
      this.$refs.formStation.resetFields();
    },
    confirm() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          if (this.addForm.enableFlag) {
            this.addForm.enableFlag = "Y";
          } else {
            this.addForm.enableFlag = "N";
          }
          const req = {
            ...this.addForm,
          };
          this.$axios
            .put(`${ApiConstant.PREFIX_CORE}/api/sys/app-terminal`, req)
            .then((res) => {
              this.$message.success(this.$t("EDIT_SUCCESS"));
              this.$store.dispatch("tagsView/jumpBeforeView", {
                to: { path: "/upms/system/setting/terminalManage" },
                vm: this,
              });
            });
        }
      });
    },
    cancel() {
      this.$store.dispatch("tagsView/jumpBeforeView", {
        to: { path: "/upms/system/setting/terminalManage" },
        vm: this,
      });
    },
  },
};
</script>
<style lang="less" scoped>
.add-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: #fff;
  background: #0d97bb;
  border-radius: 50%;
  cursor: pointer;
}
</style>

<style lang="less">
.ant-modal-footer {
  border-top: 0 !important;
}
.ant-modal-header {
  border-bottom: 0 !important;
}
.ant-modal-title {
  line-height: 24px;
  font-size: 18px;
  color: #0ea8d0;
}
</style>
