<template>
  <div>
    <xy-dialog :width="66" ref="dialog" type="form" :is-show.sync="isShow" :title="type === 'add' ? '新增商品' : '编辑商品'"
      :form="form" :rules="rules" @submit="submit">
      <template v-slot:name>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>名称：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.name" placeholder="请输入商品名称" clearable style="width: 300px;"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:poster>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            海报图：
          </div>
          <div class="xy-table-item-content">
            <div v-if="form.poster_url" style="position: relative;">
              <img :src="form.poster_url" class="avatar">
              <Button shape="circle" icon="md-close" type="error" size="small" class="img__delete"
                @click="form.poster_url = ''"></Button>
            </div>
            <el-upload v-else accept="picture" :limit="1" class="avatar-uploader" list-type="picture-card"
              :action="action" :show-file-list="true" :on-error="uploadFail" :on-success="uploadSuccess"
              :before-upload="uploadBefore">
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
        </div>
      </template>
      <template v-slot:merchantId>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>所属商户：
          </div>
          <div class="xy-table-item-content">
            <el-input suffix-icon="el-icon-arrow-down" readonly :value="form.merchantId.label" placeholder="请选择所属商户"
              clearable style="width: 300px;" @focus="isShowMerchantSelect = true,getMerchants()"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:shopIds>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            限制门店：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.shopIds" placeholder="请选择限制门店" clearable style="width: 300px;"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:productTypePid>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>所属板块：
          </div>
          <div class="xy-table-item-content">
            <el-select clearable placeholder="请选择所属板块" style="width: 300px" v-model="form.productTypePid"
              @change="typeChange">
              <el-option v-for="item in types" :key="item.id" :value="item.id" :label="item.name">
              </el-option>
            </el-select>
          </div>
        </div>
      </template>
      <template v-slot:productTypeId>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>产品类别：
          </div>
          <div class="xy-table-item-content">
            <el-select clearable placeholder="请选择产品类别" style="width: 300px" v-model="form.productTypeId">
              <el-option v-for="item in products" :key="item.id" :value="item.id" :label="item.name">
              </el-option>
            </el-select>
          </div>
        </div>
      </template>
      <template v-slot:originalPrice>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>原价：
          </div>
          <div class="xy-table-item-content number-input">
            <el-input-number :precision="2" :controls="false" :min="0" placeholder="请输入原价" clearable
              v-model="form.originalPrice" style="width: 300px;"></el-input-number>
          </div>
        </div>
      </template>
      <template v-slot:price>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>价格：
          </div>
          <div class="xy-table-item-content number-input">
            <el-input-number :precision="2" :controls="false" :min="0" placeholder="请输入价格" clearable
              v-model="form.price" style="width: 300px;"></el-input-number>
          </div>
        </div>
      </template>
      <template v-slot:fee>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>平台佣金：
          </div>
          <div class="xy-table-item-content number-input">
            <el-input-number :precision="2" :controls="false" :min="0" placeholder="请输入平台佣金" clearable
              v-model="form.fee" style="width: 300px;"></el-input-number>
          </div>
        </div>
      </template>
      <template v-slot:sharing>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>分享金：
          </div>
          <div class="xy-table-item-content number-input">
            <el-input-number :precision="2" :controls="false" :min="0" placeholder="请输入分享金" clearable
              v-model="form.sharing" style="width: 300px;"></el-input-number>
          </div>
        </div>
      </template>
      <template v-slot:maxQuantity>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>总份数：
          </div>
          <div class="xy-table-item-content">
            <el-input-number :min="0" placeholder="请输入总份数" clearable v-model="form.maxQuantity" style="width: 200px;">
            </el-input-number>
          </div>
        </div>
      </template>
      <template v-slot:limitQuantity>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>每用户限购：
          </div>
          <div class="xy-table-item-content">
            <el-input-number :min="0" placeholder="请输入每用户限购数" clearable v-model="form.limitQuantity"
              style="width: 200px;"></el-input-number>
          </div>
        </div>
      </template>
      <template v-slot:pretendQuantity>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>虚拟购买次数：
          </div>
          <div class="xy-table-item-content">
            <el-input-number :min="0" placeholder="请输入虚拟购买次数" clearable v-model="form.pretendQuantity"
              style="width: 200px;"></el-input-number>
          </div>
        </div>
      </template>
      <template v-slot:time>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>上架/下架时间：
          </div>
          <div class="xy-table-item-content">
            <el-date-picker clearable style="width: 440px;" v-model="form.time" type="datetimerange"
              :picker-options="pickerOptions" range-separator="至" start-placeholder="上架日期" end-placeholder="下架日期"
              align="right" value-format="yyyy-MM-dd hh:mm:ss">
            </el-date-picker>
          </div>
        </div>
      </template>
      <template v-slot:sortnumber>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>排序<span
              style="font-size: 12px;padding-left: 2px;color: rgb(140,140,140)">（大到小）</span> ：
          </div>
          <div class="xy-table-item-content">
            <el-input-number v-model="form.sortnumber" :controls="false" style="width: 200px;"></el-input-number>
          </div>
        </div>
      </template>
      <template v-slot:content>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            内容:
          </div>
          <div class="xy-table-item-content" style="width:680px">
			  <xyTinymce v-if="isShow" v-model="form.content"></xyTinymce>
            <!-- <tinymce ref="tinymce" :height="200" v-model="form.content" id='tinymce'></tinymce> -->
          </div>
        </div>
      </template>
    </xy-dialog>

    <Modal v-model="isShowMerchantSelect" title="所属商户选择">
      <div class="searchMerchants">
        <el-input type="text" @keyup.enter.native="searchMerchants" v-model="merchantKeyword" placeholder="请输入关键词查找商户"></el-input>
        <el-button type="primary" @click="searchMerchants">查询</el-button>
      </div>
      <Table size="small" highlight-row ref="currentRowTable" :columns="merchantTable" :data="merchants"
        @on-current-change="merchantSelect" />
      <Page :current="merchantIndex" :total="merchantTotal" simple
        style="padding-top: 14px;display: flex;justify-content: center;" @on-change="merchantPageChange" />
    </Modal>


  </div>
</template>

<script>
  import {
    store,
    show,
    save
  } from '@/api/product'
  import {
    index as merchantIndex
  } from '@/api/merchant'
  import {
    Message
  } from 'element-ui'

  // import tinymce from "@/components/Tinymce"
    import xyTinymce from "@/components/XyTinymce/index.vue";
    import {replaceAll} from "@/utils/index"
  export default {
    components: {
      xyTinymce
    },
    props: {
      types: Array
    },
    data() {
      return {
        id: '',
        isShow: false,
        type: 'add',
        action: `${process.env.VUE_APP_BASE_API}api/admin/upload-file`,
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }]
        },

        form: {
          name: '',
          poster: '',
          merchantId: '',
          shopIds: '',
          productTypePid: '',
          productTypeId: '',
          originalPrice: '',
          price: '',
          fee: '',
          sharing: '',
          maxQuantity: '',
          limitQuantity: '1',
          pretendQuantity: 0,
          time: [],
          sortnumber: 0,
          content: '',
          poster_url: ""
        },
        rules: {
          name: [{
            required: true,
            message: '请填写商品名称'
          }],
          merchantId: [{
            required: true,
            message: '请选择所属商家'
          }],
          productTypePid: [{
            required: true,
            message: '请选择所属模块'
          }],
          productTypeId: [{
            required: true,
            message: '请选择产品类别'
          }],
          originalPrice: [{
            required: true,
            message: '请输入原价'
          }],
          price: [{
            required: true,
            message: '请输入价格'
          }],
          fee: [{
            required: true,
            message: '请输入平台佣金'
          }],
          sharing: [{
            required: true,
            message: '请输入分享金'
          }],
          maxQuantity: [{
            required: true,
            message: '请输入总分数'
          }],
          limitQuantity: [{
            required: true,
            message: '请输入用户限购'
          }],
          time: [{
            required: true,
            message: '请选择上架/下架时间'
          }]
        },

        products: [], //板块下商品

        isShowMerchantSelect: false,
        merchants: [],
        merchantTable: [{
            title: '简称',
            key: 'username',
            width: 130
          },
          {
            title: '全称',
            key: 'name',
            align: 'left',
            width: 220
          },
          {
            title: '状态',
            key: 'state',
            sortable: true
          }
        ],
        merchantKeyword:"",
        merchantIndex: 1,
        merchantTotal: 0,
      }
    },
    methods: {
      async getDetail() {
        const res = await show({
          id: this.id
        })
        this.typeChange(res?.product_type_pid)
        this.form = {
          name: res?.name,
          poster: res?.poster,
          poster_url: res?.poster_url,
          merchantId: {
            label: res.merchant?.name,
            value: res.merchant?.id
          },
          shopIds: res?.shop_ids,
          productTypePid: res?.product_type_pid,
          productTypeId: res?.product_type_id,
          originalPrice: res?.original_price,
          price: res?.price,
          fee: res?.fee,
          sharing: res?.sharing,
          maxQuantity: res?.max_quantity,
          limitQuantity: res?.limit_quantity,
          pretendQuantity: res?.pretend_quantity,
          time: [res?.start_time, res?.end_time],
          sortnumber: res?.sortnumber,
          content: res?.content
        }
        // this.$refs['tinymce'].setContent(this.form.content || ' ')
      },

      //上传
      uploadFail(err) {
        console.log(err)
      },
      uploadSuccess(response) {
        console.log(response)
        this.form.poster = "/" + response.folder + "/" + response.name
        this.form.poster_url = response.url;
      },
      uploadBefore(file) {
        if ((file.size / 1000) > 2024) {
          Message({
            type: 'warning',
            message: '上传图片大小超过2M！'
          })
          return false
        }
      },

      typeChange(val) {
        if (!val) {
          this.products = []
          return
        }
        let res = this.types.filter(item => {
          return item.id === val
        })
        this.products = res[0].children
      },

      async getMerchants() {
        const res = await merchantIndex({
          page_size: 10,
          page: this.merchantIndex,
          keyword:this.merchantKeyword
        })
        this.merchantTotal = res.total
        this.merchants = res.data
      },
      searchMerchants(){
        this.getMerchants()
      },
      merchantPageChange(e) {
        this.merchantIndex = e
        this.getMerchants()
      },
      merchantSelect(row) {
        this.form.merchantId = {
          label: row.username,
          value: row.id
        }
      },

      // replaceAll(str,before,after){

      //   if(str.indexOf(before) != -1){
      //     return str.replace(new RegExp(before, 'g'),after)
      //   }else{
      //     return str
      //   }
      // },
      submit() {
        if (this.type === 'add'||this.type === 'copy') {
          store({
            name: this.form.name,
            poster: this.form.poster,
            merchant_id: this.form.merchantId?.value,
            shop_ids: this.form.shopIds,
            product_type_pid: this.form.productTypePid,
            product_type_id: this.form.productTypeId,
            original_price: this.form.originalPrice.toString(),
            price: this.form.price.toString(),
            fee: this.form.fee.toString(),
            sharing: this.form.sharing.toString(),
            max_quantity: this.form.maxQuantity.toString(),
            limit_quantity: this.form.limitQuantity.toString(),
            pretend_quantity: this.form.pretendQuantity.toString(),
            start_time: this.form.time[0],
            sortnumber: this.form.sortnumber,
            end_time: this.form.time[1],
            content: replaceAll(this.form.content,'../storage/files',`${process.env.VUE_APP_BASE_API}storage/files`)
          }).then(res => {
            Message({
              type: 'success',
              message: '新增成功'
            })
            this.isShow = false
            this.$emit('refresh')
          })
          return
        }
        if (this.type === 'editor') {
          save({
            id: this.id,
            name: this.form.name,
            poster: this.form.poster,
            merchant_id: this.form.merchantId?.value,
            shop_ids: this.form.shopIds,
            product_type_pid: this.form.productTypePid,
            product_type_id: this.form.productTypeId,
            original_price: this.form.originalPrice.toString(),
            price: this.form.price.toString(),
            fee: this.form.fee.toString(),
            sharing: this.form.sharing.toString(),
            max_quantity: this.form.maxQuantity.toString(),
            limit_quantity: this.form.limitQuantity.toString(),
            pretend_quantity: this.form.pretendQuantity.toString(),
            start_time: this.form.time[0],
            sortnumber: this.form.sortnumber,
            end_time: this.form.time[1],
            content: replaceAll(this.form.content,'../storage/files',`${process.env.VUE_APP_BASE_API}storage/files`)
          }).then(res => {
            Message({
              type: 'success',
              message: '编辑商品成功'
            })
            this.isShow = false
            this.$emit('refresh')
          })
        }
      }
    },
    watch: {
      isShow(newVal) {
        if (newVal) {
          if (this.type === 'editor'||this.type === 'copy') {
            this.getDetail()
          }

        } else {
          // this.$refs['tinymce'].setContent(' ')
          this.$refs['dialog'].reset()
          this.id = ''
          this.type = ''
        }
      }
    }

  }
</script>

<style scoped lang="scss">
  .xy-table-item-label {
    width: 164px;
  }

  .number-input {
    ::v-deep .el-input-number .el-input__inner {
      text-align: left !important;
    }
  }
  .searchMerchants{
    display: flex;
    justify-content: space-between;
    margin-bottom:16px;
    .el-input{
      width:80%
    }
  }

</style>

<style>
  .avatar-uploader .el-upload {
    width: 110px;
    height: 110px;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #BF617C;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 110px;
    height: 110px;
    line-height: 110px;
    text-align: center;
  }

  .avatar {
    width: 110px;
    display: block;
    border-radius: 6px;
  }

  .img__delete {
    transform: scale(0.7, 0.7);

    position: absolute;
    top: 1px;
    left: 4%;
  }
</style>
