<template>
  <ContainerTit>
    <span slot="pagetit">
      {{
        brandId && $accessCheck($Access.BrandManageEditBrand)
          ? "编辑品牌"
          : !brandId && $accessCheck($Access.BrandManageAddBrand)
          ? "新增品牌"
          : "品牌详情"
      }}
    </span>
    <div slot="headr">
      <el-button
        v-if="brandId && $accessCheck($Access.BrandManageEditBrand)"
        type="primary"
        :loading="loading"
        @click="submitBrand"
      >
        保存提交
      </el-button>
      <el-button
        v-else-if="!brandId && $accessCheck($Access.BrandManageAddBrand)"
        type="primary"
        @click="submitBrand"
      >
        保存提交
      </el-button>
    </div>
    <el-form
      ref="brandForm"
      :model="form"
      :rules="rules"
      size="small"
      label-width="200px"
    >
      <el-form-item label="品牌LOGO：">
        <UploadQiniu
          :modal="false"
          :file-list="img_list"
          @uploadSuccess="uploadSuccess"
          @handleRemove="uploadRemove"
        />
      </el-form-item>
      <el-form-item label="品牌编码：" prop="code">
        <el-input
          v-model="form.code"
          disabled
          placeholder="品牌编码自动生成"
          style="width: 350px"
        ></el-input>
      </el-form-item>
      <el-form-item label="品牌名称：" prop="title">
        <el-input
          v-model="form.title"
          placeholder="输入品牌名称"
          style="width: 350px"
        ></el-input>
      </el-form-item>
      <el-form-item label="是否显示：">
        <el-radio v-model="form.enableStatus" :label="5">是</el-radio>
        <el-radio v-model="form.enableStatus" :label="4">否</el-radio>
      </el-form-item>
      <el-form-item label="排序：" prop="sort">
        <el-input-number
          v-model="form.sort"
          :controls="false"
          placeholder="排序"
          style="width: 350px"
        ></el-input-number>
        <p style="color: #e6a23c; font-size: 12px">排序越大，位置越靠上</p>
      </el-form-item>
      <!--      <el-form-item label="关联供应商：" prop="supplier">-->
      <!--        <el-tag-->
      <!--          v-for="(item, index) in supplierName"-->
      <!--          :key="index"-->
      <!--          closable-->
      <!--          @close="clearSupplier"-->
      <!--        >-->
      <!--          {{ item.title }}-->
      <!--        </el-tag>-->
      <!--        <el-button-->
      <!--          style="margin-left: 10px"-->
      <!--          type="primary"-->
      <!--          @click="supplier_show = true"-->
      <!--        >-->
      <!--          选择供应商-->
      <!--        </el-button>-->

      <!--      <el-button @click="$router.push('/Purchase/ManageP/SupplierAdd')" size="mini" type="text">【新建供应商】</el-button>-->
      <!--      </el-form-item>-->
    </el-form>

    <SupplierListModal
      v-if="supplier_show"
      :is-show="supplier_show"
      :modal="false"
      :enable="true"
      :is-show-add="true"
      @confirm="supplierSelectionChange"
      @cancel="supplier_show = false"
    />
  </ContainerTit>
</template>

<script>
  // 七牛云
  import UploadQiniu from "@/component/common/UploadQiniu.vue";
  import SupplierListModal from "@/component/common/SupplierListModal.vue";
  import { getBrandInfoById, editBrand, addBrand } from "@/api/goods";
  export default {
    name: "AddBrand",
    components: {
      UploadQiniu,
      SupplierListModal,
    },
    props: {
      brandId: {
        type: [Number, String],
        default: 0,
      },
      isShow: {
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {
        loading: false,
        img_list: [],
        supplierName: [],
        supplier_show: false,
        form: {
          code: "",
          images: "",
          supplier: "",
          enableStatus: 5,
          sort: "",
          title: "",
        },
        rules: {
          title: [
            { required: true, message: "请输入品牌名称", trigger: "blur" },
          ],
          // supplier: [
          //   { required: true, message: '请选择供应商', trigger: 'change' }
          // ]
        },
        brand_id: 0,
      };
    },
    created() {
      if (this.brandId) {
        this.brand_id = this.brandId;
        this.getDetail();
      }
    },
    methods: {
      // 图片上传成功
      uploadSuccess(val, res, file, fileList) {
        this.form.images = val;
        this.img_list = fileList;
      },
      uploadRemove(file, fileList) {
        this.form.images = "";
        this.img_list = fileList;
      },
      // 获取商品详情
      async getDetail() {
        const { data } = await getBrandInfoById(this.brand_id);

        this.form = data;
        if (data.supplier) {
          this.supplierName = data.supplier.split(",").map((item, index) => {
            return {
              title: data.supplierTitle[index],
              id: item,
            };
          });
        }
        this.img_list = [
          {
            name: "",
            url: data.images,
          },
        ];
      },
      // 选择供应商 多选
      supplierSelectionChange(val) {
        this.supplierName = val;
      },
      clearSupplier(index) {
        this.supplierName.splice(index, 1);
      },
      // 提交
      submitBrand() {
        if (!this.form.title.trim()) {
          this.$message.warning("品牌名称不能为空");
          return;
        }
        this.$refs.brandForm.validate(async (valid) => {
          if (valid) {
            let target = {};
            const supplier = this.supplierName.map((item) => item.id).join(",");
            const params = {
              code: this.form.code,
              images: this.form.images,
              supplier: supplier,
              enableStatus: this.form.enableStatus,
              sort: this.form.sort,
              title: this.form.title,
            };
            this.loading = true;
            if (this.brand_id) {
              target = await editBrand(this.brand_id, {
                ...params,
              });
            } else {
              target = await addBrand({
                ...params,
              });
            }
            const data = target;
            this.loading = false;

            this.$message({
              type: "success",
              message: "提交成功",
            });
            this.$emit("submitBrand");
          }
        });
      },
    },
  };
</script>

<style>
  .logoTip {
    font-size: 12px;
    color: #fb6638;
  }
  .yc-upload .el-upload--picture-card {
    display: none;
  }
  /*.yc-upload .el-upload-list--picture-card .el-upload-list__item-actions .el-upload-list__item-delete{*/
  /*  display: none;*/
  /*}*/
</style>
