<template>
  <zj-page-container>
    <zj-page-fill class="neibuview">
      <zj-form-container ref="formRef" :form-data="formData" :form-rules="formRules">
        <zj-form-module title="商品详情" :form-data="formData" :form-items="formItems" label-width="80px">
        </zj-form-module>
        <zj-form-module
          v-if="formData.id && ~['SALE'].indexOf(cpdata.status)"
          title="出售信息"
          class="my-module"
          :form-data="formData.order"
          :form-items="formItems2"
          label-width="0px"
        />
        <zj-form-module
          title="查看留言"
          class="my-module"
          :form-data="formData.order"
          :form-items="formItems3"
          label-width="0px"
        />
        <zj-form-module
          title="操作记录"
          class="my-module"
          :form-data="formData.order"
          :form-items="formItems4"
          label-width="0px"
        />
      </zj-form-container>
    </zj-page-fill>
    <div style="box-sizing: border-box; padding: 10px; text-align: right">
      <el-button v-if="!disabled" type="primary" size="small" @click="handleSubmit">保存</el-button>
      <el-button v-if="formData.id && ~['SALE'].indexOf(formData.status)" type="primary" size="small" @click="copyGoods"
        >克隆商品</el-button
      >
      <el-button
        v-if="formData.id && ~['ON'].indexOf(formData.status)"
        type="primary"
        size="small"
        @click="setStatus('OFF')"
        >下架</el-button
      >
      <el-button
        v-if="formData.id && ~['ON'].indexOf(formData.status)"
        type="primary"
        size="small"
        @click="zhuanxiaoshou"
        >转销售</el-button
      >
      <el-button
        v-if="formData.id && ~['OFF'].indexOf(formData.status)"
        type="primary"
        size="small"
        @click="setStatus('ON')"
        >重新上架</el-button
      >
      <el-button size="small" @click="handleClose">取消</el-button>
    </div>
  </zj-page-container>
</template>

<script>
import ImageUpload from '@/components/file-upload'
import {
  esGoodsDetail,
  esGoodsCopy,
  esGoodsBatchUpdateStatus,
  esGoodsReply,
  esGoodsUpdate
} from '@/api/commodityManagement'
import { getClassifyList } from '@/api/goods'
export default {
  components: { ImageUpload },
  props: {
    detailId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      classifyList: [],
      formData: {
        brand: '',
        categoryId: '',
        categoryName: '',
        companyWechatId: '',
        companyWechatName: '',
        del: true,
        goodsName: '',
        goodsNote: '',
        imgList: [],
        isTop: true,
        likeCount: 0,
        makeDate: '',
        mark: '',
        markId: '',
        messageList: [],
        operateRecordList: [],
        power: '',
        price: 0,
        qty: 0,
        queryCount: 0,
        remark: '',
        sort: 0,
        status: '',
        topTime: '',
        userId: ''
      },
      formRules: {},
      publishStatus: [
        { label: '下架', value: 'OFF' },
        { label: '上架', value: 'ON' },
        { label: '已卖出', value: 'SALE' }
      ],
      cpdata: {}
    }
  },
  computed: {
    disabled() {
      return ~['ON', 'OFF'].indexOf(this.cpdata?.status) ? false : true
    },
    formItems() {
      return [
        {
          name: 'el-select',
          md: 12,
          options: this.classifyList.map(item => ({ label: item.name, value: item.categoryId })),
          attributes: { disabled: this.disabled },
          formItemAttributes: { label: '商品分类', prop: 'categoryId' },
          events: {
            change: val => {
              this.formData.categoryName = this.classifyList.find(item => item.categoryId == val)?.name
            }
          }
        },
        {
          name: 'el-radio',
          options: this.publishStatus,
          attributes: { disabled: true },
          md: 12,
          formItemAttributes: { label: '发布状态', prop: 'status' }
        },
        {
          name: 'el-input',
          md: 12,
          attributes: { disabled: this.disabled },
          formItemAttributes: { label: '商品名称', prop: 'goodsName' }
        },
        {
          name: 'el-input',
          md: 12,
          attributes: { disabled: this.disabled, type: 'textarea' },
          formItemAttributes: { label: '商品描述', prop: 'goodsNote' }
        },
        {
          name: 'el-input',
          md: 6,
          attributes: { disabled: this.disabled },
          formItemAttributes: { label: '商品价格', prop: 'price' }
        },
        {
          name: 'el-input',
          md: 6,
          attributes: { disabled: this.disabled },
          formItemAttributes: { label: '上架数量', prop: 'qty' }
        },
        {
          name: 'el-input',
          md: 6,
          attributes: { disabled: this.disabled },
          formItemAttributes: { label: '商品品牌', prop: 'brand' }
        },
        {
          name: 'el-input',
          md: 6,
          attributes: { disabled: this.disabled },
          formItemAttributes: { label: '功率(W)', prop: 'power' }
        },
        {
          name: 'el-date-picker',
          md: 6,
          attributes: { disabled: this.disabled, type: 'date', style: { width: '100%' }, 'value-format': 'yyyy-MM-dd' },
          formItemAttributes: { label: '制造日期', prop: 'makeDate' }
        },
        {
          name: 'el-input',
          md: 6,
          attributes: { disabled: this.disabled },
          formItemAttributes: { label: '联系电话', prop: 'linkPhone' }
        },
        {
          name: 'el-input',
          md: 6,
          attributes: { disabled: true },
          formItemAttributes: { label: '点赞量', prop: 'likeCount' }
        },
        {
          name: 'slot-component',
          md: 6,
          attributes: { disabled: true, placeholder: '' },
          formItemAttributes: { label: '留言量', prop: '' },
          render: (h, { props }) => {
            return (
              <el-input
                value={Number(this.formData?.messageList?.length)}
                disabled={true}
                size="mini"
                placeholder=""
              ></el-input>
            )
          }
        },
        {
          name: 'el-input',
          md: 6,
          attributes: { disabled: true },
          formItemAttributes: { label: '出售数量', prop: 'goumaiNum' }
        },
        {
          name: 'el-radio',
          options: [
            { label: '一级能效', value: '一级能效' },
            { label: '二级能效', value: '二级能效' },
            { label: '三级能效', value: '三级能效' },
            { label: '四级能效', value: '四级能效' },
            { label: '五级能效', value: '五级能效' }
          ],
          md: 18,
          attributes: { disabled: this.disabled },
          formItemAttributes: { label: '能效标识', prop: 'mark' }
        },
        {
          md: 24,
          name: 'slot-component',
          formItemAttributes: {
            label: '商品图片',
            prop: 'imgList',
            rules: []
          },
          render: (h, { props, onInput }) => {
            return <ImageUpload fileList={this.formData.imgList} limit={100} isEdit={!this.disabled} />
          }
        }
      ]
    },
    // esOrderInfo
    formItems2() {
      return [
        {
          name: 'slot-component',
          md: 24,
          attributes: { disabled: this.disabled },
          formItemAttributes: { label: '', prop: '', 'label-width': '0px' },
          render: (h, { props }) => {
            return (
              <div>
                <el-row gutter={10}>
                  <el-col xs={24} sm={24} md={8} lg={8} xl={8}>
                    <div class="info">
                      <div class="info_title">卖家信息</div>
                      <div class="info_bottom">
                        <div class="info_bottom_lt">
                          {this?.formData?.esOrderInfo?.sellUrl ? (
                            <el-image
                              style="width: 40px; height: 40px"
                              src={this.$showImgUrl(this?.formData?.esOrderInfo?.sellUrl)}
                            ></el-image>
                          ) : null}
                        </div>
                        <div class="info_bottom_rt">
                          <div>微信昵称：{this?.formData?.esOrderInfo?.sellName}</div>
                          <div>微信手机号：{this?.formData?.esOrderInfo?.sellMobile}</div>
                          <div>发布时间：{this?.formData?.esOrderInfo?.sellTime}</div>
                        </div>
                      </div>
                    </div>
                  </el-col>
                  <el-col xs={24} sm={24} md={8} lg={8} xl={8}>
                    <div class="info">
                      <div class="info_title">买家信息</div>
                      <div class="info_bottom">
                        <div class="info_bottom_lt">
                          {this?.formData?.esOrderInfo?.wechatUserUrl ? (
                            <el-image
                              style="width: 40px; height: 40px"
                              src={this.$showImgUrl(this?.formData?.esOrderInfo?.wechatUserUrl)}
                            ></el-image>
                          ) : null}
                        </div>
                        <div class="info_bottom_rt">
                          <div>微信昵称：{this?.formData?.esOrderInfo?.wechatUserName}</div>
                          <div>微信手机号：{this?.formData?.esOrderInfo?.wechatUserMobile}</div>
                          <div>
                            收货人信息：
                            {`(${this?.formData?.esOrderInfo?.userMobile || ''}) ${
                              this?.formData?.esOrderInfo?.userMobile || ''
                            }`}
                          </div>
                          <div>收货人地址：{this?.formData?.esOrderInfo?.sellName}</div>
                          <div>
                            支付方式：
                            {
                              { WECHAT: '微信支付', CASH: '到店支付', TRANSFER: '转账支付' }[
                                this?.formData?.esOrderInfo?.payType
                              ]
                            }
                          </div>
                        </div>
                      </div>
                    </div>
                  </el-col>
                  {~['SEND', 'OVER'].indexOf(this?.formData?.esOrderInfo?.status) ? (
                    <el-col xs={24} sm={24} md={8} lg={8} xl={8}>
                      <div class="info">
                        <div class="info_title">物流信息</div>
                        <div class="info_bottom">
                          <div class="info_bottom_rt">
                            <div>
                              <el-radio-group disabled={true} value={this?.formData?.esOrderInfo?.logisticsType}>
                                <el-radio label="SELF">自提</el-radio>
                                <el-radio label="DELIVERY">物流</el-radio>
                              </el-radio-group>
                            </div>
                            {this?.formData?.esOrderInfo?.logisticsType == 'DELIVERY' ? (
                              <div>快递单号：{this?.formData?.esOrderInfo?.logisticsNo}</div>
                            ) : null}
                            {this?.formData?.esOrderInfo?.logisticsType == 'DELIVERY' ? (
                              <div>快递公司：{this?.formData?.esOrderInfo?.logisticsName}</div>
                            ) : null}
                            {this?.formData?.esOrderInfo?.logisticsType == 'DELIVERY' ? (
                              <el-button
                                type="primary"
                                size="small"
                                onClick={() => {
                                  this.$router.push({
                                    name: 'orderManagement',
                                    params: {
                                      pageName: this?.formData?.esOrderInfo?.esOrderId,
                                      pageType: 'materialFlow',
                                      pageCode: this?.formData?.esOrderInfo?.esOrderId
                                    }
                                  })
                                }}
                              >
                                查看物流
                              </el-button>
                            ) : null}
                          </div>
                        </div>
                      </div>
                    </el-col>
                  ) : null}
                </el-row>
              </div>
            )
          }
        }
      ]
    },
    formItems3() {
      return [
        {
          name: 'slot-component',
          md: 24,
          attributes: { disabled: this.disabled },
          formItemAttributes: { label: '', prop: 'messageList', 'label-width': '0px' },
          render: (h, { props }) => {
            var { formData } = props
            return (
              <div>
                <zj-table
                  columns={[
                    {
                      columnAttributes: {
                        label: '留言人名称',
                        prop: 'createBy'
                      }
                    },
                    {
                      columnAttributes: {
                        label: '留言内容',
                        prop: 'content'
                      }
                    },
                    {
                      columnAttributes: {
                        label: '留言时间',
                        prop: 'createTime'
                      }
                    },
                    {
                      columnAttributes: {
                        label: '回复人名称',
                        prop: 'replyBy'
                      }
                    },
                    {
                      columnAttributes: {
                        label: '回复内容',
                        prop: 'replyContent'
                      }
                    },
                    {
                      columnAttributes: {
                        label: '回复时间',
                        prop: 'replyTime'
                      }
                    },
                    {
                      columnAttributes: {
                        label: '操作'
                      },
                      render: (h, { row, column, index }) => {
                        return (
                          <div style="padding-left:10px">
                            <el-button
                              type="text"
                              onClick={() => {
                                this.msgSend(row)
                              }}
                            >
                              回复
                            </el-button>
                          </div>
                        )
                      }
                    }
                  ]}
                  tableData={this.formData.messageList}
                ></zj-table>
              </div>
            )
          }
        }
      ]
    },
    formItems4() {
      return [
        {
          name: 'slot-component',
          md: 24,
          attributes: { disabled: this.disabled },
          formItemAttributes: { label: '', prop: 'operateRecordList', 'label-width': '0px' },
          render: (h, { props }) => {
            var { formData } = props
            return (
              <div>
                <zj-table
                  columns={[
                    {
                      columnAttributes: {
                        label: '操作类型',
                        prop: 'operateType'
                      }
                    },
                    {
                      columnAttributes: {
                        label: '操作内容',
                        prop: 'content'
                      }
                    },
                    {
                      columnAttributes: {
                        label: '操作人',
                        prop: 'createBy'
                      }
                    },
                    {
                      columnAttributes: {
                        label: '操作时间',
                        prop: 'createTime'
                      }
                    }
                  ]}
                  tableData={this.formData.operateRecordList}
                ></zj-table>
              </div>
            )
          }
        }
      ]
    }
  },
  watch: {
    detailId: {
      handler(newVal, oldVal) {
        if (!newVal) {
          return
        }
        esGoodsDetail({ id: newVal }).then(res => {
          this.formData = {
            ...res.data,
            goumaiNum: res.data?.esOrderInfo?.num || '',
            imgList: res.data.imgList.map(item => {
              return {
                ...item,
                url: item.imgUrl
              }
            })
          }
          this.cpdata = JSON.parse(JSON.stringify(res.data))
        })
      },
      deep: true,
      immediate: true
    }
  },
  created() {
    getClassifyList({
      status: true,
      type: 5
    }).then(res => {
      this.classifyList = res.data
    })
  },
  methods: {
    msgSend(row) {
      this.$prompt('留言回复', '回复', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputType: 'textarea'
      }).then(({ value }) => {
        if (value) {
          esGoodsReply({
            id: this.detailId,
            messageId: row.id,
            content: value
          }).then(res => {
            this.$message({ type: 'success', message: `设置成功!` })
            esGoodsDetail({ id: this.detailId }).then(res2 => {
              this.formData = {
                ...res2.data,
                imgList: res2.data.imgList.map(item => {
                  return {
                    ...item,
                    url: item.imgUrl
                  }
                })
              }
            })
          })
        }
      })
    },
    copyGoods() {
      esGoodsCopy({ id: this.detailId }).then(res => {
        this.$message({ type: 'success', message: `克隆成功!` })
        this.$emit('back', { detailId: res.data })
      })
    },
    setStatus(status) {
      esGoodsBatchUpdateStatus({ ids: this.detailId, status: status }).then(res => {
        this.$message({ type: 'success', message: `设置成功!` })
        this.handleClose()
      })
    },
    handleSubmit() {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          esGoodsUpdate({
            ...this.formData,
            imgList: this.formData.imgList.map(item => ({ ...item, imgUrl: item.url }))
          }).then(res => {
            this.$message({ type: 'success', message: `成功!` })
            this.$emit('back')
          })
        }
      })
    },
    handleClose() {
      this.$emit('back')
    },
    zhuanxiaoshou() {
      this.$router.push({
        name: 'orderManagement',
        params: {
          pageName: this.detailId,
          pageType: 'add',
          pageCode: this.detailId
        }
      })
    }
  }
}
</script>

<style lang="scss">
.info {
  .info_title {
    font-size: 16px;
    font-weight: 700;
  }

  .info_bottom {
    display: flex;
    margin: 10px 0;

    .info_bottom_lt {
      width: 40px;
      height: 40px;
    }

    .info_bottom_rt {
      padding: 0 0 0 10px;
      line-height: 30px;

      .photoPZ {
        display: inline-block;
        vertical-align: text-top;
      }
    }
  }
}
</style>
<style lang="scss" scoped>
.neibuview {
  box-sizing: border-box;
  padding-left: 16px;

  ::v-deep & > .zj-page-fill-scroll {
    box-sizing: border-box;
    padding-right: 16px;

    & > div:nth-child(1) {
      margin-top: 20px;
    }
  }
}

.header1style {
  text-align: right;
  font-size: 12px;
  color: red;
  line-height: 18px;
}

.my-module {
  ::v-deep .el-form-item__content {
    margin-left: 12px !important;
  }
}
</style>
