<template>
  <div class="page-wrapper systerm-add">
    <a-collapse
      v-model="activeName"
      :bordered="false"
      expand-icon-position="right"
      class="header"
    >
      <a-collapse-panel key="a" :header="$t('BASE_INFO')">
        <a-form-model ref="addForm" :model="addForm">
          <a-row>
            <a-col :span="12">
              <a-form-model-item
                prop="msgCode"
                :label-col="{ span: 4 }"
                :wrapper-col="{ span: 20 }"
                :rules="{
                  max: 32,
                  message: $t('PLACEENTER') + 32 + $t('LENGTH_TIP'),
                  trigger: 'blur',
                  required: false,
                }"
                :label="$t('INFOCODE')"
              >
                <a-input
                  v-model="addForm.msgCode"
                  :placeholder="$t('PLACEENTER')"
                  allow-clear
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item
                prop="msgName"
                :label-col="{ span: 4 }"
                :wrapper-col="{ span: 20 }"
                :rules="{
                  max: 32,
                  message: $t('PLACEENTER') + 32 + $t('LENGTH_TIP'),
                  trigger: 'blur',
                  required: true,
                }"
                :label="$t('INFONAME')"
              >
                <a-input
                  v-model="addForm.msgName"
                  :placeholder="$t('PLACEENTER')"
                  allow-clear
                />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col>
              <a-form-model-item
                :label-col="{ span: 2 }"
                :wrapper-col="{ span: 22 }"
                :label="$t('REMARK')"
                prop="remark"
                :rules="{
                  max: 255,
                  message: $t('PLACEENTER') + 255 + $t('LENGTH_TIP'),
                  trigger: 'blur',
                  required: false,
                }"
              >
                <a-input
                  v-model="addForm.remark"
                  :placeholder="$t('PLACEENTER')"
                  type="textarea"
                />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </a-collapse-panel>
    </a-collapse>
    <div class="bot-div">
      <MomTable
        ref="MomTable"
        row-key="id"
        :columns="tableColumns"
        :data-source="tableData"
        :total="total"
        :page.sync="page"
        :action-buttons="actionButtons"
        :mega-extend="{
          rowAction: {
            width: 120,
          },
        }"
        @edit="handleEdit"
        @delete="handleDelete"
      >
        <a-row slot="toolbar" class="button-top-table">
          <a-button
            v-if="hasAuth('INTERNATIONAL_MANAGEMENT:ADD')"
            icon="plus"
            @click="handleAdd"
          >
            {{ $t("ADD") }}
          </a-button>
        </a-row>
      </MomTable>
    </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 @click="cancel">
        <Icon type="icon-dir-f-rollback" :size="18" /> {{ $t("CANCEL") }}
      </a-button>
    </div>

    <MegaDrawer
      width="520"
      :title="actionType === 'add' ? $t('ADD') : $t('EDIT')"
      :visible.sync="megaDrawerVisible"
      @close="megaDrawerVisible = false"
      @ok="handleImportSave"
      @cancel="handleImportCancel"
    >
      <!-- :label-col="{ span: 5 }"
        :wrapper-col="{ span: 19 }" -->
      <a-form-model
        slot="main"
        ref="DrawerForm"
        :model="formLink"
        :rules="FormRules"
      >
        <a-row>
          <a-col :span="24">
            <a-form-model-item :label="$t('LINK_ADDRESS')" prop="linkUrl">
              <a-input
                v-model="formLink.linkUrl"
                :placeholder="$t('PLACEENTER')"
              />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <a-form-model-item :label="$t('INTERVALPLAY_TIME')" prop="pollTime">
              <div class="tdp">
                <a-input-number
                  v-model="formLink.pollTime"
                  :min="0"
                  :precision="0"
                />
                <div class="rightD">{{ $t("SECOND") }}</div>
              </div>
            </a-form-model-item>
          </a-col></a-row
        >
      </a-form-model>
    </MegaDrawer>
  </div>
</template>

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

export default {
  components: {
    Icon,
    MegaDrawer,
  },
  data() {
    return {
      activeName: "a",
      actionId: "",
      actionType: "add",
      idValue: "",
      msgItems: [],
      tempMap: {},
      formLink: {
        linkUrl: "",
        pollTime: "",
      },
      megaDrawerVisible: false,
      roleIdList: [],
      page: 1, // 页码
      total: 0, // 每页个数
      actionButtons: [
        this.hasAuth("INTERNATIONAL_MANAGEMENT:EDIT") && "edit",
        //  icon-ins-check-circle
        this.hasAuth("INTERNATIONAL_MANAGEMENT:DELETE") && "delete",
      ],
      tableData: [],
      // 表格的配置项
      tableColumns: [
        {
          dataIndex: "linkUrl",
          align: "left",
          width: 1000,
          sorter: false,
          ellipsis: true,
          title: () => this.$t("LINK_ADDRESS"), // 链接地址
        },
        {
          dataIndex: "pollTime",
          align: "left",
          width: 100,
          title: () => this.$t("INTERVALPLAY_TIME"), // 轮播时间
          ellipsis: true,
          sorter: false,
        },
      ],
      addForm: {
        msgCode: "",
        remark: "",
        msgName: "",
      },
      roleCategoryArr: [],
      permissionType: "MENU",
    };
  },
  computed: {
    FormRules() {
      // eslint-disable-next-line
      const temp_obj = {
        linkUrl: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error(this.$t("PLACEENTER")));
              } else if (String(value).length > 512) {
                callback(
                  new Error(this.$t("PLACEENTER") + 512 + this.$t("LENGTH_TIP"))
                );
              }
              callback();
            },
            trigger: "blur",
          },
        ],
        pollTime: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value && value !== 0) {
                callback(new Error(this.$t("PLACEENTER")));
              } else if (
                String(value).length > 8 ||
                String(value).includes("+")
              ) {
                callback(
                  new Error(this.$t("PLACEENTER") + 8 + this.$t("LENGTH_TIP"))
                );
              }
              callback();
            },
            trigger: "blur",
          },
        ],
      };
      // eslint-disable-next-line
      return temp_obj;
    },
  },
  mounted() {},
  created() {},
  methods: {
    // 点击表格行内的编辑
    handleEdit(row, index) {
      this.actionType = "edit";
      this.actionId = index;
      this.megaDrawerVisible = true;
      this.formLink.linkUrl = row.linkUrl;
      this.formLink.pollTime = row.pollTime;
    },
    handleDelete(row) {
      this.$confirm({
        title: this.$t("DELETE"),
        content: this.$t("DELETE_INFO"),
        okType: "warning",
        okText: this.$t("CONFIRM"),
        cancelText: this.$t("CANCEL"),
        centered: false,
        icon: "close-circle",
        onOk: () => {
          const num = this.tableData.findIndex((item) => {
            return (
              item.linkUrl === row.linkUrl && item.pollTime === row.pollTime
            );
          });
          this.tableData.splice(num, 1);
        },
      });
    },
    confirm() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          const params = { ...this.addForm, msgItems: this.tableData };
          this.$axios
            .post(`${ApiConstant.PREFIX_CORE}/api/epropelmsg`, params)
            .then((res) => {
              if (res.data.success) {
                this.$message.success(this.$t("ADD_SUCCESS"));
                this.addForm.msgName = "";
                this.addForm.remark = "";
                this.addForm.msgCode = "";
                this.tableData = [];
                this.$store.dispatch("tagsView/jumpBeforeView", {
                  to: { path: "/epropel/infoManage" },
                  vm: this,
                });
              }
            });
        } else {
          // this.$message.error(this.$t("REQUIRED_INFO"));
        }
      });
    },
    cancel() {
      this.$store.dispatch("tagsView/jumpBeforeView", {
        to: { path: "/epropel/infoManage" },
        vm: this,
      });
    },
    handleAdd() {
      this.actionType = "add";
      this.megaDrawerVisible = true;
    },
    handleImportSave() {
      this.$refs.DrawerForm.validate((valid) => {
        if (valid) {
          if (this.formLink.linkUrl && this.actionType === "add") {
            this.tableData.push({
              linkUrl: this.formLink.linkUrl,
              pollTime: this.formLink.pollTime,
            });
          }
          if (this.actionType === "edit") {
            this.tableData.forEach((item, index) => {
              if (index === this.actionId) {
                this.$set(
                  this.tableData[index],
                  "linkUrl",
                  this.formLink.linkUrl
                );
                this.$set(
                  this.tableData[index],
                  "pollTime",
                  this.formLink.pollTime
                );
              }
            });
          }
          this.megaDrawerVisible = false;
          this.formLink = {
            linkUrl: "",
            pollTime: "",
          };
        }
      });
    },
    handleImportCancel() {
      this.formLink.linkUrl = "";
      this.formLink.pollTime = "";
      this.megaDrawerVisible = false;
    },
  },
};
</script>

<style lang="less" scoped>
@import (optional, once) "@/theme/index.less";
.systerm-add {
  .permission-tab {
    border-bottom: 1px solid @border-color;
    &-item {
      position: relative;
      display: inline-block;
      height: 34px;
      cursor: pointer;
      &::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 2px;
        background: transparent;
      }
      &:hover,
      &.active {
        color: @primary-color;
      }
    }
    .permission-tab-item + .permission-tab-item {
      margin-left: 20px;
    }
    .permission-tab-item.active::after {
      background: @primary-color;
    }
  }
  /deep/.ant-tabs {
    &-content {
      padding: 10px 15px 0;
    }
    &-bar {
      padding-top: 10px;
    }
    &-nav .ant-tabs-tab {
      text-align: left;
      &.ant-tabs-tab-active {
        background: @primary-1;
      }
    }
    &.button-permission-pane {
      .all-selected {
        padding-left: 28px;
      }
      .ant-collapse {
        &-header {
          padding: 4px 0 4px 28px;
        }
        &-arrow {
          color: @text-color;
          font-size: 12px;
        }
        &-content {
          padding-left: 28px;
          .button-item {
            display: inline-block;
            width: 164px;
            margin-bottom: 6px;
          }
        }
        &-extra {
          float: none;
        }
      }
    }
  }
  background: #f0f2f5;
}
.bot-div {
  background: #ffffff;
  height: calc(61vh);
  margin-top: 14px;
}
.tdp {
  display: flex;
}
.rightD {
  width: 55px;
  height: 36px;
  background-color: #e9ebeeff;
  border-radius: 4px 4px 4px 4px;
  opacity: 1;
  border: 1px solid #dcdfe6;
  text-align: center;
  font-size: 14px;
  color: #909399ff;
  display: flex;
  justify-content: center;
  align-items: center;
}
/deep/.ant-input-number {
  width: 100%;
}
</style>
