<template>
  <template-page
    v-if="isShowTab"
    ref="pageRef"
    :get-list="getList"
    :table-attributes="tableAttributes"
    :table-events="tableEvents"
    :options-evens-group="optionsEvensGroup"
    :moreParameters="moreParameters"
    :column-parsing="columnParsing"
    :operation="operation"
    :operationColumnWidth="80"
    :fieldBeansHook="fieldBeansHook"
  >
    <div class="footer">
      <el-button size="mini" @click="cancel()">取消</el-button>
      <el-button size="mini" @click="formConfirm()" type="primary">确定</el-button>
    </div>
    <!-- 选择商品 -->
    <el-dialog
      title="商品详情"
      :visible.sync="isShowDetail"
      width="100%"
      style="height: 100vh"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :append-to-body="true"
    >
      <div style="max-height: 82vh; overflow-y: auto">
        <el-form ref="formRef" :rules="rules" :model="formData" label-width="110px" size="small" label-position="left">
          <el-card class="box-card" id="box">
            <div slot="header" class="clearfix">
              <span>基础信息</span>
            </div>
            <div class="mymain-container">
              <el-row :gutter="20" justify="start">
                <!-- <el-col :span="24">
									<el-form-item label="商品可选状态" prop="status" :required="true">
										<div class="flex_ac">
											<el-radio-group v-model="formData.status">
											    <el-radio disabled :label="true">开启</el-radio>
											    <el-radio disabled :label="false">关闭</el-radio>
											</el-radio-group>
											<div class="hui" style="margin-left: 80px;">开启状态，商户可选择本商品；关闭则不允许商户选择；</div>
										</div>
									</el-form-item>
								</el-col> -->
                <el-col :span="6">
                  <el-form-item
                    label="品牌"
                    prop="brandName"
                    :rules="[{ required: true, message: `请输入品牌`, trigger: 'blur' }]"
                  >
                    <el-input type="text" v-model="formData.brandName" disabled placeholder="请输入"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="是否虚拟商品" prop="isVr" :required="true">
                    <el-radio-group v-model="formData.isVr">
                      <el-radio disabled :label="true">是</el-radio>
                      <el-radio disabled :label="false">否</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item
                    label="商品大类"
                    prop="category1"
                    :rules="[{ required: true, message: `请输入商品大类`, trigger: 'blur' }]"
                  >
                    <el-input type="text" v-model="formData.category1" disabled placeholder="请输入"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item
                    label="商品小类"
                    prop="category2"
                    :rules="[{ required: true, message: `请输入商品小类`, trigger: 'blur' }]"
                  >
                    <el-input type="text" v-model="formData.category2" disabled placeholder="请输入"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item
                    label="商品名称"
                    prop="goodsName"
                    :rules="[{ required: true, message: `请输入商品名称`, trigger: 'blur' }]"
                  >
                    <el-input
                      type="textarea"
                      :rows="3"
                      v-model="formData.goodsName"
                      disabled
                      placeholder="请输入"
                    ></el-input>
                    <div class="hui">商品名称将显示在商品详情，让用户更直接了解商品内涵</div>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="商品描述" prop="describeText">
                    <el-input
                      type="textarea"
                      :rows="3"
                      v-model="formData.describeText"
                      disabled
                      placeholder="请输入"
                    ></el-input>
                    <div class="hui">商品描述将显示在商品详情，让用户更了解商品细节</div>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label="商品主图"
                    prop="imgUrl"
                    :rules="[{ required: true, message: `请上传商品主图`, trigger: 'change' }]"
                  >
                    <ImageUpload :fileList="formData.imgUrl" :limit="1" :isEdit="false" :fileType="['image']" />
                    <div class="suggest">建议尺寸800*800</div>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="商品视频" prop="vedio">
                    <ImageUpload :fileList="formData.vedio" :limit="1" :isEdit="false" :fileType="['video']" />
                    <div class="suggest">建议视频宽高比16:9，建议时长9-30秒</div>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item
                    label="轮播图"
                    prop="imgs"
                    :rules="[{ required: true, message: `请上传轮播图`, trigger: 'change' }]"
                  >
                    <ImageUpload :fileList="formData.imgs" :limit="6" :isEdit="false" :fileType="['image']" />
                    <div class="suggest">建议尺寸800*800，最多上传6张</div>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-card>
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>价格库存</span>
            </div>
            <div class="mymain-container">
              <el-row :gutter="20" justify="start">
                <el-col :span="24">
                  <el-form-item label="规格类型" prop="goodsLibrarySpecList" class="is-required"> </el-form-item>
                </el-col>
                <el-table
                  :data="formData.goodsLibrarySpecList"
                  element-loading-text="Loading"
                  border
                  fit
                  highlight-current-row
                  stripe
                >
                  <el-table-column prop="" align="center" label="*大类">
                    <template slot-scope="scope">
                      <el-form-item
                        :prop="'goodsLibrarySpecList.' + scope.$index + '.mainName'"
                        :rules="[{ required: true, message: `请输入大类`, trigger: 'blur' }]"
                        label-width="0"
                      >
                        <el-input type="text" v-model="scope.row.mainName" disabled placeholder="请输入"></el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column prop="" align="center" label="*小类">
                    <template slot-scope="scope">
                      <el-form-item
                        :prop="'goodsLibrarySpecList.' + scope.$index + '.smallName'"
                        :rules="[{ required: true, message: `请输入小类`, trigger: 'blur' }]"
                        label-width="0"
                      >
                        <el-input type="text" v-model="scope.row.smallName" disabled placeholder="请输入"></el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column prop="" align="center" label="*规格型号">
                    <template slot-scope="scope">
                      <el-form-item
                        :prop="'goodsLibrarySpecList.' + scope.$index + '.specValue'"
                        :rules="[{ required: true, message: `请输入规格型号`, trigger: 'blur' }]"
                        label-width="0"
                      >
                        <el-input type="text" v-model="scope.row.specValue" disabled placeholder="请输入"></el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column prop="" align="center" label="*参考销售价格">
                    <template slot-scope="scope">
                      <el-form-item
                        :prop="'goodsLibrarySpecList.' + scope.$index + '.price'"
                        :rules="[
                          { required: true, message: `请输入参考销售价格`, trigger: 'blur' },
                          {
                            pattern: /^(([0-9]\d*)|([0][.]{1}[0-9]{0,2}[1-9]+)|([1-9]\d*[.]{1}[0-9]+))$/g,
                            message: '请输入大于等于0的数',
                            trigger: 'blur'
                          }
                        ]"
                        label-width="0"
                      >
                        <el-input type="number" v-model="scope.row.price" disabled placeholder="请输入"></el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column prop="" align="center" label="*参考划线价格">
                    <template slot-scope="scope">
                      <el-form-item
                        :prop="'goodsLibrarySpecList.' + scope.$index + '.orgPrice'"
                        :rules="[
                          { required: true, message: `请输入参考划线价格`, trigger: 'blur' },
                          {
                            pattern: /^(([0-9]\d*)|([0][.]{1}[0-9]{0,2}[1-9]+)|([1-9]\d*[.]{1}[0-9]+))$/g,
                            message: '请输入大于等于0的数',
                            trigger: 'blur'
                          }
                        ]"
                        label-width="0"
                      >
                        <el-input type="number" v-model="scope.row.orgPrice" disabled placeholder="请输入"></el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column prop="" align="center" label="*参考成本价">
                    <template slot-scope="scope">
                      <el-form-item
                        :prop="'goodsLibrarySpecList.' + scope.$index + '.costPrice'"
                        :rules="[
                          { required: true, message: `请输入参考成本价`, trigger: 'blur' },
                          {
                            pattern: /^(([0-9]\d*)|([0][.]{1}[0-9]{0,2}[1-9]+)|([1-9]\d*[.]{1}[0-9]+))$/g,
                            message: '请输入大于等于0的数',
                            trigger: 'blur'
                          }
                        ]"
                        label-width="0"
                      >
                        <el-input type="number" v-model="scope.row.costPrice" disabled placeholder="请输入"></el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column prop="" align="center" label="*参考佣金">
                    <template slot-scope="scope">
                      <el-form-item
                        :prop="'goodsLibrarySpecList.' + scope.$index + '.shareAmount'"
                        :rules="[
                          { required: true, message: `请输入参考佣金`, trigger: 'blur' },
                          {
                            pattern: /^(([0-9]\d*)|([0][.]{1}[0-9]{0,2}[1-9]+)|([1-9]\d*[.]{1}[0-9]+))$/g,
                            message: '请输入大于等于0的数',
                            trigger: 'blur'
                          }
                        ]"
                        label-width="0"
                      >
                        <el-input
                          type="number"
                          v-model="scope.row.shareAmount"
                          disabled
                          placeholder="请输入"
                        ></el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column prop="" align="center" label="*参考内部佣金">
                    <template slot-scope="scope">
                      <el-form-item
                        :prop="'goodsLibrarySpecList.' + scope.$index + '.innerShareAmount'"
                        :rules="[
                          { required: true, message: `请输入参考内部佣金`, trigger: 'blur' },
                          {
                            pattern: /^(([0-9]\d*)|([0][.]{1}[0-9]{0,2}[1-9]+)|([1-9]\d*[.]{1}[0-9]+))$/g,
                            message: '请输入大于等于0的数',
                            trigger: 'blur'
                          }
                        ]"
                        label-width="0"
                      >
                        <el-input
                          type="number"
                          v-model="scope.row.innerShareAmount"
                          disabled
                          placeholder="请输入"
                        ></el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column prop="" align="center" label="*参考规格图片">
                    <template slot-scope="scope">
                      <el-form-item
                        :prop="'goodsLibrarySpecList.' + scope.$index + '.imgUrl'"
                        :rules="[{ required: true, message: `请上传参考规格图片`, trigger: 'change' }]"
                        label-width="0"
                      >
                        <div class="flex_ac">
                          <ImageUpload
                            :fileList="scope.row.imgUrl"
                            :limit="1"
                            :download="false"
                            :viewOnline="false"
                            :isEdit="false"
                            modType="text"
                            :fileType="['image']"
                          />
                        </div>
                      </el-form-item>
                    </template>
                  </el-table-column>
                </el-table>
              </el-row>
            </div>
          </el-card>
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>详情内容</span>
            </div>
            <div class="mymain-container">
              <el-row :gutter="20" justify="start">
                <el-form-item
                  label="详情内容"
                  prop="content"
                  :rules="[{ required: true, message: `请输入详情内容`, trigger: 'change' }]"
                >
                  <quillEditor v-model="formData.content"></quillEditor>
                  <input type="hidden" v-model="formData.content" />
                </el-form-item>
              </el-row>
            </div>
          </el-card>
        </el-form>
      </div>
      <div class="footer">
        <el-button size="mini" @click="isShowDetail = false">返回</el-button>
      </div>
    </el-dialog>
  </template-page>
</template>

<script>
import TemplatePage from '@/components/template/template-page-1.vue'
import { required, mobileRequired, mobile } from '@/components/template/rules_verify.js'
import { listPageV2, pageExport, save, del, getDetail, batch, sync } from '@/api/goodsWarehouse'
import operation_mixin from '@/components/template/operation_mixin.js'
import ImageUpload from '@/components/file-upload'
import quillEditor from '@/components/v-quill-editor'
export default {
  components: {
    TemplatePage,
    ImageUpload,
    quillEditor
  },
  mixins: [operation_mixin],
  props: ['isSelectShop'],
  data() {
    return {
      // 表格属性
      tableAttributes: {
        // 启用勾选列
        selectColumn: true,
        selectable: this.selectable
      },
      // 表格事件
      tableEvents: {
        'selection-change': this.selectionChange
      },
      // 勾选选中行
      recordSelected: [],
      /** 表单变量 */
      formDialogType: 0,
      formDialogTitles: ['新增', '编辑'],
      formDialog: false,
      formData: {
        status: true,
        brandName: '',
        category1: '',
        category2: '',
        isVr: true,
        goodsName: '',
        describeText: '',
        imgUrl: [],
        vedio: [],
        imgs: [],
        content: '',
        goodsLibrarySpecList: []
      },
      rules: {},
      status: '',
      formType: 'add',
      formVisible: false,
      stepIndex: 0,
      isEdit: 0,
      editSpecImageIdx: 0,
      isShowTab: true,
      isShowDetail: false
    }
  },
  watch: {
    isSelectShop() {
      this.isShowTab = false
      this.recordSelected = []
      this.$nextTick(() => {
        this.isShowTab = true
      })
    }
  },
  computed: {
    // 事件组合
    optionsEvensGroup() {
      return []
    },
    // 更多参数
    moreParameters() {
      return []
    },
    formItems() {
      return []
    }
  },
  methods: {
    // 列表请求函数
    getList(p, cb) {
      try {
        var pam = JSON.parse(JSON.stringify(p))
        pam.params.push({ param: 'a.status', compare: '=', value: true })
        cb && cb(pam)
        return listPageV2(pam)
      } catch (error) {
        console.log(error)
      }
    },
    // 列表导出函数
    exportList: pageExport,
    changeType() {
      this.$refs.pageRef.refreshList()
    },
    selectable(row) {
      return this.recordSelected.length
        ? !!this.recordSelected.find(item => item.goodsLibraryId == row.goodsLibraryId)
        : true
    },
    fieldBeansHook(row) {
      row.forEach(item => {
        if (item.jname == 'status') {
          item.isQuery = false
        }
      })
      console.log(row, 111)
    },
    // 表格列解析渲染数据更改
    columnParsing(item, defaultData) {
      if (item.jname === 'imgUrl') {
        defaultData.render = (h, { row, index, column }) => {
          return (
            <div style="padding:6px;cursor: pointer;">
              {row.imgUrl
                ? row.imgUrl
                    .split(',')
                    .map(url => (
                      <el-image
                        src={this.$showImgUrl(url)}
                        preview-src-list={[this.$showImgUrl(url)]}
                        fit="fit"
                        style="width:60px;height:60px;"
                      />
                    ))
                : null}
            </div>
          )
        }
      }
      return defaultData
    },
    // 监听勾选变化
    selectionChange(data) {
      this.recordSelected = data
    },
    // 表格操作列
    operation(h, { row, index, column }) {
      return (
        <div class="operation-btns">
          <el-button
            type="text"
            onClick={() => {
              this.isShowDetail = true
              getDetail({
                goodsLibraryId: row.goodsLibraryId
              }).then(res => {
                let imgs = []
                let goodsLibrarySpecList = []
                res.data.imgs.split(',').forEach(item => {
                  imgs.push({
                    url: item
                  })
                })
                res.data.goodsLibrarySpecList.forEach(item => {
                  goodsLibrarySpecList.push({
                    ...item,
                    imgUrl: item.imgUrl ? [{ url: item.imgUrl }] : []
                  })
                })
                Object.assign(this.formData, res.data, {
                  imgUrl: res.data.imgUrl ? [{ url: res.data.imgUrl }] : [],
                  imgs: res.data.imgs ? imgs : [],
                  vedio: res.data.vedio ? [{ url: res.data.vedio }] : [],
                  goodsLibrarySpecList
                })
                this.$nextTick(() => {
                  document.querySelector('#box').scrollIntoView({
                    behavior: 'smooth'
                  })
                })
              })
            }}
          >
            查看详情
          </el-button>
        </div>
      )
    },
    formCancel() {
      this.formVisible = false
      this.$refs?.formRef?.resetFields()
      this.$data.formData = this.$options.data().formData
    },
    formConfirm() {
      if (this.recordSelected.length == 0) {
        return this.$message.warning('请至少勾选一条数据！')
      }
      this.$emit('selectShop', this.recordSelected[0].goodsLibraryId)
    },
    cancel() {
      this.$emit('selectShop')
    }
  }
}
</script>

<style lang="scss" scoped>
.page {
  padding: 20px;
  padding-bottom: 60px;
  box-sizing: border-box;
}
.flex_ac {
  display: flex;
  align-items: center;
}
.box-card {
  margin-top: 30px;
}
.hui {
  color: #888888;
}
.suggest {
  display: inline-block;
  padding: 0 10px;
  margin-top: 10px;
  background-color: #ffdee5;
  color: #cd1e46;
}
.footer {
  padding: 15px 40px;
  box-sizing: border-box;
  text-align: right;
}
::v-deep .zj-page-fill {
  max-height: 360px !important;
  overflow-y: auto;
}
::v-deep .el-dialog {
  margin-top: 0 !important;
}
::v-deep .el-dialog__wrapper {
  overflow: hidden !important;
}
</style>
