<template>
  <div>
    <el-card class="box-card">
      <byTable
        :source="sourceList.data"
        :pagination="sourceList.pagination"
        :config="config"
        :loading="loading"
        :searchConfig="searchConfig"
        highlight-current-row
        :action-list="[
          {
            text: '添加事业部',
            action: () => clickModal(),
          },
        ]"
        @get-list="getList"
        @clickReset="clickReset">
      </byTable>
    </el-card>

    <el-dialog :title="modalType == 'add' ? '添加事业部' : '编辑事业部'" v-if="openDialog" v-model="openDialog" width="900">
      <byForm :formConfig="formConfig" :formOption="formOption" v-model="formData.data" :rules="rules" ref="submit">
        <template #status>
          <div style="width: 100%">
            <el-radio-group v-model="formData.data.status">
              <el-radio v-for="(item, index) in status" :key="index" :label="item.dictKey">{{ item.dictValue }}</el-radio>
            </el-radio-group>
          </div>
        </template>
        <template #priceBillingStandardId>
          <div style="width: 100%">
            <el-select v-model="formData.data.priceBillingStandardIdArr" placeholder="请选择加工计费标准" multiple style="width: 100%">
              <el-option v-for="item in priceBillingStandardList" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey" />
            </el-select>
          </div>
        </template>
      </byForm>
      <template #footer>
        <el-button @click="openDialog = false" size="large">取 消</el-button>
        <el-button type="primary" @click="submitForm()" size="large" v-preReClick>确 定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import byTable from "/src/components/byTable/index";
import byForm from "/src/components/byForm/index";
import { ElMessage, ElMessageBox } from "element-plus";
import { ref } from "vue";

const { proxy } = getCurrentInstance();
const sourceList = ref({
  data: [],
  pagination: {
    total: 0,
    pageNum: 1,
    pageSize: 10,
    name: "",
    priceBillingStandardId: "",
    contactPerson: "",
  },
});
const loading = ref(false);
const priceBillingStandardList = ref([]);
const searchConfig = computed(() => {
  return [
    {
      type: "input",
      prop: "name",
      label: "事业部",
    },
    {
      type: "select",
      prop: "priceBillingStandardId",
      label: "加工计费标准",
      data: priceBillingStandardList.value,
    },
    {
      type: "input",
      prop: "contactPerson",
      label: "联系人",
    },
  ];
});
const config = computed(() => {
  return [
    {
      attrs: {
        label: "事业部",
        prop: "name",
        width: 140,
      },
    },
    {
      attrs: {
        label: "加工计费标准",
        prop: "priceBillingStandardId",
        width: 140,
      },
      render(val) {
        return proxy.dictKeyValue(val, priceBillingStandardList.value);
      },
    },
    {
      attrs: {
        label: "下单模式",
        prop: "orderMode",
        width: 210,
      },
      render(val) {
        return proxy.dictKeyValue(val, proxy.useUserStore().allDict["department_orderMode"]);
      },
    },
    {
      attrs: {
        label: "佣金规则",
        prop: "commissionRule",
        width: 120,
      },
      render(val) {
        return proxy.dictKeyValue(val, proxy.useUserStore().allDict["department_commissionRule"]);
      },
    },
    {
      attrs: {
        label: "信用额度",
        prop: "lineCredit",
        width: 100,
        align: "right",
      },
    },
    {
      attrs: {
        label: "已用额度",
        prop: "usedCredit",
        width: 100,
        align: "right",
      },
    },
    {
      attrs: {
        label: "事业部电话",
        prop: "telephone",
        width: 120,
      },
    },
    {
      attrs: {
        label: "联系人",
        prop: "contactPerson",
        width: 120,
      },
    },
    {
      attrs: {
        label: "联系人电话",
        prop: "contactNumber",
        width: 120,
      },
    },
    {
      attrs: {
        label: "万里牛仓库",
        prop: "wlnWarehouseCode",
        width: 120,
      },
    },
    {
      attrs: {
        label: "万里牛品牌",
        prop: "wlnBrand",
        width: 180,
      },
    },
    {
      attrs: {
        label: "地址",
        prop: "address",
        "min-width": 220,
      },
    },
    {
      attrs: {
        label: "操作",
        width: 120,
        align: "center",
        fixed: "right",
      },
      renderHTML(row) {
        return [
          {
            attrs: {
              label: "编辑",
              type: "primary",
              text: true,
            },
            el: "button",
            click() {
              clickUpdate(row);
            },
          },
          {
            attrs: {
              label: "删除",
              type: "danger",
              text: true,
            },
            el: "button",
            click() {
              clickDelete(row);
            },
          },
        ];
      },
    },
  ];
});
const getList = async (req, status) => {
  if (status) {
    sourceList.value.pagination = {
      pageNum: sourceList.value.pagination.pageNum,
      pageSize: sourceList.value.pagination.pageSize,
    };
  } else {
    sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
  }
  loading.value = true;
  proxy.post("/department/page", sourceList.value.pagination).then((res) => {
    sourceList.value.data = res.rows;
    sourceList.value.pagination.total = res.total;
    setTimeout(() => {
      loading.value = false;
    }, 200);
  });
};
getList();
const clickReset = () => {
  getList("", true);
};
const getPriceSystem = () => {
  proxy.post("/priceBillingStandard/list", {}).then((res) => {
    if (res && res.length > 0) {
      priceBillingStandardList.value = res.map((item) => {
        return {
          dictKey: item.id,
          dictValue: item.name,
        };
      });
    }
  });
};
getPriceSystem();
const modalType = ref("add");
const openDialog = ref(false);
const submit = ref(null);
const status = ref([
  {
    dictKey: 1,
    dictValue: "启用",
  },
  {
    dictKey: 0,
    dictValue: "禁用",
  },
]);
const formOption = reactive({
  inline: true,
  labelWidth: "120px",
  itemWidth: 100,
  rules: [],
  labelPosition: "right",
});
const formData = reactive({
  data: {
    status: 1,
    wlnWarehouseCodeArr: [],
    wlnBrandArr: [],
  },
});
const formConfig = computed(() => {
  return [
    {
      type: "title",
      title: "账号密码",
      label: "",
    },
    {
      type: "input",
      prop: "adminUsername",
      label: "管理员账号",
      itemType: "text",
      itemWidth: 50,
    },
    {
      type: "input",
      prop: "adminPassword",
      label: "管理员密码",
      itemType: "text",
      itemWidth: 50,
    },
    {
      type: "title",
      title: "基本信息",
      label: "",
    },
    {
      type: "input",
      prop: "name",
      label: "事业部",
      itemType: "text",
      itemWidth: 50,
    },
    {
      type: "input",
      prop: "telephone",
      label: "事业部电话",
      itemType: "text",
      itemWidth: 50,
    },
    {
      type: "input",
      prop: "address",
      label: "事业部地址",
      itemType: "text",
    },
    {
      type: "input",
      prop: "contactPerson",
      label: "联系人",
      itemType: "text",
      itemWidth: 50,
    },
    {
      type: "input",
      prop: "contactNumber",
      label: "联系人电话",
      itemType: "text",
      itemWidth: 50,
    },
    {
      type: "select",
      label: "佣金规则",
      prop: "commissionRule",
      data: proxy.useUserStore().allDict["department_commissionRule"],
      itemWidth: 50,
    },
    {
      type: "select",
      label: "下单模式",
      prop: "orderMode",
      data: proxy.useUserStore().allDict["department_orderMode"],
      itemWidth: 50,
    },
    {
      type: "slot",
      slotName: "priceBillingStandardId",
      label: "加工计费标准",
    },
    {
      type: "slot",
      slotName: "status",
      prop: "status",
      label: "状态",
    },
    {
      type: "title",
      title: "信用",
      label: "",
    },
    {
      type: "number",
      prop: "lineCredit",
      label: "信用额度",
      itemType: "text",
      itemWidth: 50,
      min: 0,
      controls: false,
    },
    {
      type: "input",
      prop: "usedCredit",
      label: "已用额度",
      itemType: "text",
      itemWidth: 50,
      disabled: true,
      placeholder: " ",
    },
    {
      type: "title",
      title: "万里牛对接",
      label: "",
    },
    {
      type: "select",
      label: "万里牛仓库编码",
      prop: "wlnWarehouseCodeArr",
      data: proxy.useUserStore().allDict["wlnWarehouseCoding"],
      multiple: true,
    },
    {
      type: "select",
      label: "万里牛品牌",
      prop: "wlnBrandArr",
      data: proxy.useUserStore().allDict["wlnBrand"],
      multiple: true,
    },
  ];
});
const rules = ref({
  adminUsername: [{ required: true, message: "请输入管理员账号", trigger: "blur" }],
  adminPassword: [{ required: true, message: "请输入管理员密码", trigger: "blur" }],
  name: [{ required: true, message: "请输入事业部", trigger: "blur" }],
  telephone: [{ required: true, message: "请输入事业部电话", trigger: "blur" }],
  address: [{ required: true, message: "请输入事业部地址", trigger: "blur" }],
  contactPerson: [{ required: true, message: "请输入联系人", trigger: "blur" }],
  contactNumber: [{ required: true, message: "请输入联系人电话", trigger: "blur" }],
  orderMode: [{ required: true, message: "请选择下单模式", trigger: "change" }],
  status: [{ required: true, message: "请选择状态", trigger: "change" }],
});
const clickModal = () => {
  modalType.value = "add";
  formData.data = {
    status: 1,
    wlnWarehouseCodeArr: [],
    wlnBrandArr: [],
    priceBillingStandardIdArr: [],
  };
  openDialog.value = true;
};
const submitForm = () => {
  submit.value.handleSubmit(() => {
    if (formData.data.wlnBrandArr && formData.data.wlnBrandArr.length > 0) {
      formData.data.wlnBrand = formData.data.wlnBrandArr.join(",");
    } else {
      formData.data.wlnBrand = "";
    }
    if (formData.data.wlnWarehouseCodeArr && formData.data.wlnWarehouseCodeArr.length > 0) {
      formData.data.wlnWarehouseCode = formData.data.wlnWarehouseCodeArr.join(",");
    } else {
      formData.data.wlnWarehouseCode = "";
    }
    if (formData.data.priceBillingStandardIdArr && formData.data.priceBillingStandardIdArr.length > 0) {
      formData.data.priceBillingStandardId = formData.data.priceBillingStandardIdArr.join(",");
    } else {
      formData.data.priceBillingStandardId = "";
    }
    proxy.post("/department/" + modalType.value, formData.data).then(() => {
      ElMessage({
        message: modalType.value == "add" ? "添加成功" : "编辑成功",
        type: "success",
      });
      openDialog.value = false;
      getList();
    });
  });
};
const clickUpdate = (row) => {
  modalType.value = "edit";
  proxy.post("/department/detail", { id: row.id }).then((res) => {
    formData.data = res;
    if (formData.data.wlnBrand) {
      formData.data.wlnBrandArr = formData.data.wlnBrand.split(",");
    } else {
      formData.data.wlnBrandArr = [];
    }
    if (formData.data.wlnWarehouseCode) {
      formData.data.wlnWarehouseCodeArr = formData.data.wlnWarehouseCode.split(",");
    } else {
      formData.data.wlnWarehouseCodeArr = [];
    }
    if (formData.data.priceBillingStandardId) {
      formData.data.priceBillingStandardIdArr = formData.data.priceBillingStandardId.split(",");
    } else {
      formData.data.priceBillingStandardIdArr = [];
    }
    openDialog.value = true;
  });
};
const clickDelete = (row) => {
  ElMessageBox.confirm("你是否确认此操作", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      proxy.post("/department/delete", { id: row.id }).then(() => {
        ElMessage({ message: "删除成功", type: "success" });
        getList();
      });
    })
    .catch(() => {});
};
</script>

<style lang="scss" scoped>
::v-deep(.el-input-number .el-input__inner) {
  text-align: left;
}
</style>
