<template>
  <div>
    <div>
      <MomTable
        ref="MomTable"
        :page.sync="page"
        :columns="tableColumns"
        :data-source="tableData"
        :query-param="queryForm"
        row-key="id"
        :query-param-item="queryFormItem"
        :action-buttons="tableAction"
        :total="total"
        :mega-extend="{
          rowAction: {
            width: 62,
          },
        }"
        @search="searchPageData"
      >
        <!-- <template slot="businessType" slot-scope="text, record">
          <span>{{ formatData(businessTypeList, record.businessType) }}</span>
        </template>
        <template slot="operatorType" slot-scope="text, record">
          <span>{{ formatData(operatorTypeList, record.operatorType) }}</span>
        </template> -->
        <!-- <template slot="isAudit" slot-scope="text, record">
          <span>{{ formatData(isAuditList, record.isAudit) }}</span>
        </template> -->
        <!-- <template slot="status" slot-scope="text, record">
          <span
            :style="record.status === '0' ? 'color: #d45f5f' : 'color: #0fd19c'"
            >{{ formatData(statusList, record.status) }}</span
          >
        </template> -->
      </MomTable>
    </div>
    <i-view-dialog-form
      :visible="dialogVisble"
      :title="$t('VIEW_DETAIL')"
      :form-item="dialogFormItem"
      :search-form="dialogForm"
      :show-footer="false"
      :span="2"
      :drawer-width="60"
      @close="dialogVisble = false"
    />
    <MegaDrawer
      width="700"
      :title="$t('VIEW_DETAIL')"
      :visible="drawerVisible"
      @close="drawerVisible = false"
      @cancel="drawerVisible = false"
    >
      <a-form-model
        slot="main"
        ref="ruleForm"
        :model="form"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 16 }"
      >
        <a-row>
          <a-col :span="12">
            <a-form-model-item :label="$t('TITLE')" prop="title">
              <a-input
                v-model="form.title"
                disabled
                :placeholder="$t('PLACEENTER')"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item :label="$t('HOST_ADDRESS')" prop="operIp">
              <a-input
                v-model="form.operIp"
                disabled
                :placeholder="$t('PLACEENTER')"
              />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-model-item :label="$t('OPERATOR')" prop="operName">
              <a-input
                v-model="form.operName"
                disabled
                :placeholder="$t('PLACEENTER')"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item
              :label="$t('OPERATION_LOCATION')"
              prop="operLocation"
            >
              <a-input
                v-model="form.operLocation"
                disabled
                :placeholder="$t('PLACEENTER')"
              />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-model-item :label="$t('OPERATION_TIME')" prop="operTime">
              <a-input
                v-model="form.operTime"
                disabled
                :placeholder="$t('PLACEENTER')"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item :label="$t('REQUEST_URL')" prop="operUrl">
              <a-input
                v-model="form.operUrl"
                disabled
                :placeholder="$t('PLACEENTER')"
              />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-model-item :label="$t('DEPARTMENT_NAME')" prop="deptName">
              <a-input
                v-model="form.deptName"
                disabled
                :placeholder="$t('PLACEENTER')"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item :label="$t('REQUEST_MODE')" prop="requestMethod">
              <a-input
                v-model="form.requestMethod"
                disabled
                :placeholder="$t('PLACEENTER')"
              />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-model-item :label="$t('BUSINESS_TYPE')" prop="businessType">
              <a-select v-model="form.businessType" disabled>
                <a-select-option
                  v-for="(item, index) in businessTypeList"
                  :key="index"
                  :value="item.value"
                >
                  {{ item.label }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <!-- <a-col :span="12">
            <a-form-model-item :label="$t('AUDIT_OR_NOT')" prop="isAudit">
              <a-select v-model="form.isAudit" disabled>
                <a-select-option
                  v-for="(item, index) in businessTypeList"
                  :key="index"
                  :value="item.value"
                >
                  {{ item.label }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col> -->
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-model-item
              :label="$t('OPERATION_CATEGORY')"
              prop="operatorType"
            >
              <a-select v-model="form.operatorType" disabled>
                <a-select-option
                  v-for="(item, index) in businessTypeList"
                  :key="index"
                  :value="item.value"
                >
                  {{ item.label }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item :label="$t('STATUS')" prop="status">
              <a-select v-model="form.status" disabled>
                <a-select-option
                  v-for="(item, index) in businessTypeList"
                  :key="index"
                  :value="item.value"
                >
                  {{ item.label }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <a-form-model-item
              :label-col="{ span: 4 }"
              :wrapper-col="{ span: 20 }"
              :label="$t('METHOD')"
              prop="method"
            >
              <a-textarea
                v-model="form.method"
                readonly
                :placeholder="$t('PLACEENTER')"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item
              :label-col="{ span: 4 }"
              :wrapper-col="{ span: 20 }"
              :label="$t('REQUEST_PARAMETERS')"
              prop="jsonResult"
            >
              <a-textarea
                v-model="form.jsonResult"
                readonly
                :placeholder="$t('PLACEENTER')"
              />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <a-form-model-item
              :label-col="{ span: 4 }"
              :wrapper-col="{ span: 20 }"
              :label="$t('RETURN_PARAMETERS')"
              prop="operParam"
            >
              <a-textarea
                v-model="form.operParam"
                readonly
                cols="5"
                rows="5"
                :placeholder="$t('PLACEENTER')"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item
              :label-col="{ span: 4 }"
              :wrapper-col="{ span: 20 }"
              :label="$t('ERROR_MESSAGE')"
              prop="errorMsg"
            >
              <a-textarea
                v-model="form.errorMsg"
                readonly
                cols="5"
                rows="5"
                :placeholder="$t('PLACEENTER')"
              />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
      <template slot="footer">
        <MegaButton @click="drawerVisible = false">{{
          $t("CANCEL")
        }}</MegaButton>
      </template>
    </MegaDrawer>
  </div>
</template>

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

export default {
  components: {
    MegaDrawer,
    MegaButton,
    // eslint-disable-next-line vue/no-unused-components
    Icon,
  },
  data() {
    return {
      // 表格的配置项
      tableColumns: [
        {
          dataIndex: "title",
          key: "table_title",
          title: () => this.$t("TITLE"),
          width: 200,
          sorter: false,
        },
        {
          dataIndex: "businessType",
          title: () => this.$t("BUSINESS_TYPE"),
          scopedSlots: { customRender: "businessType" },
          options: [],
          width: 120,
        },
        {
          dataIndex: "operatorType",
          title: () => this.$t("OPERATION_CATEGORY"),
          scopedSlots: { customRender: "operatorType" },
          options: [],
          width: 120,
        },
        // {
        //   dataIndex: "isAudit",
        //   title: () => this.$t("AUDIT_OR_NOT"),
        //   scopedSlots: { customRender: "isAudit" },
        //   options: [],
        //   width: 120,
        //   sorter: false,
        // },
        {
          dataIndex: "status",
          title: () => this.$t("STATUS"),
          scopedSlots: { customRender: "status" },
          options: [],
          width: 100,
        },
        {
          dataIndex: "businessKey",
          title: () => this.$t("OPERATION_OBJECT"),
          width: 200,
          sorter: false,
        },
        {
          dataIndex: "requestMethod",
          title: () => this.$t("REQUEST_MODE"),
          width: 120,
          sorter: false,
        },
        {
          ellipsis: true,
          dataIndex: "operUrl",
          title: () => this.$t("REQUEST_URL"),
          width: 300,
          sorter: false,
        },
        {
          ellipsis: true,
          dataIndex: "method",
          title: () => this.$t("METHOD"),
          minWidth: 400,
          sorter: false,
        },
        {
          dataIndex: "operIp",
          title: () => this.$t("HOST_ADDRESS"),
          width: 180,
          sorter: false,
        },
        {
          dataIndex: "operName",
          title: () => this.$t("OPERATOR"),
          width: 120,
        },
        {
          dataIndex: "operTime",
          title: () => this.$t("OPERATION_TIME"),
          width: 168,
          sorter: false,
        },
      ],
      tableData: [],
      title: "", // 弹框的标题
      dialogVisble: false, // 弹框的显示 隐藏
      drawerVisible: false,
      // 查询sort
      sortParams: null,
      // 查询的表单的配置项
      queryForm: {
        businessKey: "",
        title: "",
        businessType: "",
        operatorType: "",
        // isAudit: "",
        status: "",
        method: "",
        operIp: "",
        operName: "",
      },
      // 新增或修改的表单配置项
      dialogForm: {
        title: "",
        businessType: "",
        operatorType: "",
        status: "",
        // isAudit: "",
        requestMethod: "",
        operUrl: "",
        operName: "",
        operIp: "",
        operTime: "",
        deptName: "",
        operLocation: "",
        method: "",
        jsonResult: "",
        operParam: "",
        errorMsg: "",
      },
      form: {
        title: "",
        businessType: "",
        operatorType: "",
        status: "",
        // isAudit: "",
        requestMethod: "",
        operUrl: "",
        operName: "",
        operIp: "",
        operTime: "",
        deptName: "",
        operLocation: "",
        method: "",
        jsonResult: "",
        operParam: "",
        errorMsg: "",
      },
      tableAction: [
        (h, value, a, b) => (
          <span onClick={() => this.handleView(value)}>
            <Icon
              class="operation-icon"
              type="icon-cur-eye"
              size={14}
              title={this.$t("VIEW")}
            />
          </span>
        ),
      ],
      dialogFormVisible: false,
      total: 0,
      page: 1,
      businessTypeList: [],
      operatorTypeList: [],
      // isAuditList: [],
      statusList: [],
    };
  },
  computed: {
    // dialog表单的配置项详情
    dialogFormItem() {
      return {
        title: {
          i18n: "TITLE",
          disabled: true,
        },
        operIp: {
          i18n: "HOST_ADDRESS",
          disabled: true,
        },
        operName: {
          i18n: "OPERATOR",
          disabled: true,
        },
        operLocation: {
          i18n: "OPERATION_LOCATION",
          disabled: true,
        },
        operTime: {
          i18n: "OPERATION_TIME",
          disabled: true,
        },
        operUrl: {
          i18n: "REQUEST_URL",
          disabled: true,
        },
        deptName: {
          i18n: "DEPARTMENT_NAME",
          disabled: true,
        },

        requestMethod: {
          i18n: "REQUEST_MODE",
          disabled: true,
        },

        businessType: {
          itemType: "select",
          disabled: true,
          i18n: "BUSINESS_TYPE",
          width: "90",
          options: [],
        },

        // isAudit: {
        //   itemType: "select",
        //   disabled: true,
        //   i18n: "AUDIT_OR_NOT",
        //   width: "90",
        //   options: [],
        // },
        operatorType: {
          itemType: "select",
          disabled: true,
          i18n: "OPERATION_CATEGORY",
          width: "90",
          options: [],
        },
        status: {
          itemType: "select",
          disabled: true,
          i18n: "STATUS",
          width: "90",
          options: [],
          rule: [],
        },
        method: {
          i18n: "METHOD",
          disabled: true,
          inputType: "textarea",
          span: 1,
        },
        jsonResult: {
          i18n: "REQUEST_PARAMETERS",
          disabled: true,
          inputType: "textarea",
          span: 1,
        },

        operParam: {
          i18n: "RETURN_PARAMETERS",
          disabled: true,
          inputType: "textarea",
          span: 1,
        },
        errorMsg: {
          i18n: "ERROR_MESSAGE",
          disabled: true,
          inputType: "textarea",
          span: 1,
        },
      };
    },
    // 查询表格配置项
    queryFormItem() {
      return this.$observable("queryFormItem", {
        businessKey: {
          label: () => this.$t("OPERATION_OBJECT"),
          labelWidth: "90",
        },
        title: {
          label: () => this.$t("TITLE"),
        },
        businessType: {
          itemType: "select",
          label: () => this.$t("BUSINESS_TYPE"),
          labelWidth: "90",
          optionsProps: {
            label: "label",
            value: "value",
          },
          options: [],
        },
        // isAudit: {
        //   itemType: "select",
        //   label: () => this.$t("AUDIT_OR_NOT"),
        //   labelWidth: "90",
        //   optionsProps: {
        //     label: "label",
        //     value: "value",
        //   },
        //   options: [],
        // },
        operatorType: {
          itemType: "select",
          label: () => this.$t("OPERATION_CATEGORY"),
          labelWidth: "90",
          optionsProps: {
            label: "label",
            value: "value",
          },
          options: [],
        },
        status: {
          itemType: "select",
          label: () => this.$t("STATUS"),
          optionsProps: {
            label: "label",
            value: "value",
          },
          options: [],
        },
        method: {
          label: () => this.$t("METHOD"),
          labelWidth: "90",
        },
        operIp: {
          label: () => this.$t("HOST_ADDRESS"),
          labelWidth: "90",
        },
        operName: {
          label: () => this.$t("OPERATOR"),
          labelWidth: "90",
        },
      });
    },
  },
  mounted() {
    // 初始化字典数据
    this.initDictData();
    // 获取数据
    // this.searchPageData();
  },
  methods: {
    // 初始化字典数据
    initDictData() {
      // 业务类型
      this.getDictByCode(`DIC:CORE:LOG_BUSINESS_TYPE`).then((res) => {
        this.queryFormItem.businessType.options = res.data.data;
        this.businessTypeList = res.data.data;
        this.dialogFormItem.businessType.options = res.data.data;
      });
      // 是否审计
      // this.getDictByCode(`DIC:CORE:LOG_IS_AUDIT`).then((res) => {
      //   this.queryFormItem.isAudit.options = res.data.data;
      //   this.isAuditList = res.data.data;
      //   this.dialogFormItem.isAudit.options = res.data.data;
      // });
      // // 操作类别
      this.getDictByCode(`DIC:CORE:LOG_OPERATOR_TYPE`).then((res) => {
        this.queryFormItem.operatorType.options = res.data.data;
        this.operatorTypeList = res.data.data;
        this.dialogFormItem.operatorType.options = res.data.data;
      });
      // // 状态
      this.getDictByCode(`DIC:CORE:LOG_STATUS`).then((res) => {
        this.queryFormItem.status.options = res.data.data;
        this.statusList = res.data.data;
        this.dialogFormItem.status.options = res.data.data;
      });
    },
    // 后台分页查询
    searchPageData(req) {
      this.$axios
        .get(`${ApiConstant.PREFIX_CORE}/api/sys/log/search`, {
          params: req,
        })
        .then((res) => {
          this.tableData = res.data.data.records;
          this.total = res.data.data.total;
        });
    },
    formatData(data, status) {
      const result = data.find((item) => item.value === status.toString());
      return result ? result.label : "";
    },
    // 点击表格行内的查看
    handleView(value) {
      this.form = Object.assign(this.form, value.record);
      // this.form.isAudit = this.form.isAudit.toString();
      // this.form.operatorType = this.form.operatorType.toString();
      // this.form.status = this.form.status.toString();
      this.drawerVisible = true;
    },
  },
};
</script>
