<template>
  <div>
    <el-container>
      <!--搜索-->
      <el-header class="searchBox">
        <el-form :inline="true" :model="searchForm" class="demo-form-inline">
          <el-form-item label="产品名称">
            <el-input v-model="searchForm.productName" placeholder="产品名称" />
          </el-form-item>
          <el-form-item label="SPID">
            <el-input v-model="searchForm.spid" placeholder="SPID" />
          </el-form-item>
          <el-form-item label="CPID">
            <el-input v-model="searchForm.cpid" placeholder="CPID" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchBtn">查询</el-button>
            <el-button @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
      </el-header>

      <!--表格-->
      <el-main class="tableBox" >
        <el-button style="float: right" type="warning" size="small" icon="el-icon-circle-plus-outline" @click="add">立即创建</el-button>
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column prop="productName" label="产品名称" width="200" />
          <el-table-column prop="spid" label="SPID" width="80" />
          <el-table-column prop="cpid" label="CPID" width="80" />
          <el-table-column prop="originalPrice" label="原价" width="80" />
          <el-table-column prop="discountInfo" label="优惠" width="80" />
          <el-table-column prop="remark" label="备注" />
          <el-table-column prop="createTime" label="创建时间" width="200" />
          <el-table-column fixed="right" label="操作" width="130">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="refresh(scope.row)">刷新</el-button>
              <el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
              <el-button type="text" size="small" @click="dele(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            :current-page.sync="searchForm['pageNum']"
            :page-sizes="[20, 50, 100, 300]"
            :page-size="searchForm['pageSize']"
            layout="total, sizes, pager"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-main>
    </el-container>

    <!--新增抽屉-->
    <el-drawer
      ref="addDrawer"
      title="新增产品"
      size="100%"
      :before-close="addHandleClose"
      :with-header="false"
      :visible.sync="addDialog"
      direction="rtl"
      custom-class="demo-drawer"
    >
      <div class="demo-drawer__content" style="overflow-y: scroll;height: 100vh">
        <span>新增产品</span>
        <el-form :model="addForm">
          <el-form-item label="产品名称" label-width="80px">
            <el-input v-model="addForm.productName" autocomplete="off" />
          </el-form-item>
          <el-form-item label="CPID" label-width="80px">
            <el-select v-model="addForm.cpid" placeholder="请选择">
              <el-option
                v-for="item in cateList"
                :key="item.cpid"
                :label="item.cpid"
                :value="item.cpid"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="SPID" label-width="80px">
            <el-input v-model="addForm.spid" autocomplete="off" />
          </el-form-item>
          <el-form-item label="activeType" label-width="80px">
            <el-input v-model="addForm.activeType" placeholder="科创定义activeType，根据对照表填写" autocomplete="off" />
          </el-form-item>
          <el-form-item label="产品形态" label-width="80px">
            <el-select v-model="addForm.isCompositeProduct" placeholder="请选择">
              <el-option label="单产品" :value="0"/>
              <el-option label="复合产品" :value="1"/>
              <el-option label="多选一" :value="2"/>
            </el-select>
          </el-form-item>
          <el-form-item label="	产品原价" label-width="80px">
            <el-input v-model="addForm.originalPrice" autocomplete="off" />
          </el-form-item>
          <el-form-item label="优惠信息" label-width="80px">
            <el-input v-model="addForm.discountInfo" autocomplete="off" />
          </el-form-item>
          <el-form-item label="包含会员" label-width="80px">
            <el-input v-model="addForm.memberName" autocomplete="off" />
          </el-form-item>
          <el-form-item label="页面标题" label-width="80px">
            <el-input v-model="addForm.pageTitle" autocomplete="off" />
          </el-form-item>
          <el-form-item label="产品备注" label-width="80px">
            <el-input v-model="addForm.remark" autocomplete="off" />
          </el-form-item>
          <el-form-item label="单推链接" label-width="80px">
            <el-input v-model="addForm.pushJumpUrl" autocomplete="off" />
          </el-form-item>
          <el-form-item label="激活链接" label-width="80px">
            <el-input v-model="addForm.flowJumpUrl" autocomplete="off" />
          </el-form-item>
          <el-form-item label="活动链接" label-width="80px">
            <el-input v-model="addForm.remark1" placeholder="外链活动链接" autocomplete="off" />
          </el-form-item>
          <el-form-item label="活动类型" label-width="80px">
            <el-input v-model="addForm.remark2" placeholder="外链活动识别标签" autocomplete="off" />
          </el-form-item>
          <el-form-item label="按钮文案" label-width="80px">
            <el-input v-model="addForm.remark3" placeholder="当前进B站合约模板可用，其他模板为分享副标题" autocomplete="off" />
          </el-form-item>
          <el-form-item label="主题颜色" label-width="80px">
            <div class="block">
              <el-color-picker v-model="addColors.thc.s" />
            </div>
            <div class="block">
              <el-color-picker v-model="addColors.thc.e" />
            </div>
          </el-form-item>

          <el-form-item label="背景颜色" label-width="80px">
            <div class="block">
              <el-color-picker v-model="addColors.bgc.s" />
            </div>
            <div class="block">
              <el-color-picker v-model="addColors.bgc.e" />
            </div>
          </el-form-item>

          <el-form-item label="banner" label-width="80px">
            <el-upload
              :action="imgapi"
              list-type="picture-card"
              :file-list="bannerList"
              :on-success="bannerPreview"
              :on-remove="bannerRemove"
            >
              <i class="el-icon-plus" />
            </el-upload>
          </el-form-item>
          <el-form-item label="logo" label-width="80px">
            <el-upload
              class="avatar-uploader"
              :action="imgapi"
              :show-file-list="false"
              :on-success="logoPreview"
            >
              <img v-if="logoUrl" :src="logoUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </el-form-item>
          <el-form-item label="推广图" label-width="80px">
            <el-upload
              class="avatar-uploader"
              :action="imgapi"
              :show-file-list="false"
              :on-success="proPreview"
            >
              <img v-if="proUrl" :src="proUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </el-form-item>
          <el-form-item label="引导图" label-width="80px">
            <el-upload
              class="avatar-uploader"
              :action="imgapi"
              :show-file-list="false"
              :on-success="guidPreview"
            >
              <img v-if="guidUrl" :src="guidUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </el-form-item>
        </el-form>
        <el-tabs type="border-card" style="margin-top: 20px">
          <el-tab-pane key="orderingInfo" label="产品订购说明">
            <quill-editor
              ref="text"
              v-model="addForm.orderingInfo"
              class="myQuillEditor"
              :options="editorOption"
            />
          </el-tab-pane>
          <el-tab-pane key="givePhoneInfo" label="赠送话费说明">
            <quill-editor ref="text" v-model="addForm.givePhoneInfo" class="myQuillEditor" :options="editorOption" />
          </el-tab-pane>
        </el-tabs>
        <div class="demo-drawer__footer">
          <el-button @click="cancelForm">取 消</el-button>
          <el-button type="primary" :loading="loading" @click="$refs.addDrawer.closeDrawer()">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
        </div>
      </div>
    </el-drawer>

    <!--编辑抽屉-->
    <el-drawer
      ref="editDrawer"
      title="新增产品"
      size="100%"
      :before-close="editHandleClose"
      :with-header="false"
      :visible.sync="editDialog"
      direction="rtl"
      custom-class="demo-drawer"
    >
      <div class="demo-drawer__content" style="overflow-y: scroll;height: 100vh">
        <span>编辑产品</span>
        <el-form :model="editForm">
          <el-form-item label="产品名称" label-width="80px">
            <el-input v-model="editForm.productName" autocomplete="off" />
          </el-form-item>
          <el-form-item label="CPID" label-width="80px">
            <el-select v-model="editForm.cpid" placeholder="请选择">
              <el-option
                v-for="item in cateList"
                :key="item.cpid"
                :label="item.cpid"
                :value="item.cpid"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="SPID" label-width="80px">
            <el-input v-model="editForm.spid" autocomplete="off" />
          </el-form-item>
          <el-form-item label="activeType" label-width="80px">
            <el-input v-model="editForm.activeType" placeholder="科创定义activeType，根据对照表填写" autocomplete="off" />
          </el-form-item>
          <el-form-item label="产品形态" label-width="80px">
            <el-select v-model="editForm.isCompositeProduct" placeholder="请选择">
              <el-option label="单产品" :value="0"/>
              <el-option label="复合产品" :value="1"/>
              <el-option label="多选一" :value="2"/>
            </el-select>
          </el-form-item>
          <el-form-item label="	产品原价" label-width="80px">
            <el-input v-model="editForm.originalPrice" autocomplete="off" />
          </el-form-item>
          <el-form-item label="优惠信息" label-width="80px">
            <el-input v-model="editForm.discountInfo" autocomplete="off" />
          </el-form-item>
          <el-form-item label="包含会员" label-width="80px">
            <el-input v-model="editForm.memberName" autocomplete="off" />
          </el-form-item>
          <el-form-item label="页面标题" label-width="80px">
            <el-input v-model="editForm.pageTitle" autocomplete="off" />
          </el-form-item>
          <el-form-item label="产品备注" label-width="80px">
            <el-input v-model="editForm.remark" autocomplete="off" />
          </el-form-item>
          <el-form-item label="单推链接" label-width="80px">
            <el-input v-model="editForm.pushJumpUrl" autocomplete="off" />
          </el-form-item>
          <el-form-item label="激活链接" label-width="80px">
            <el-input v-model="editForm.flowJumpUrl" autocomplete="off" />
          </el-form-item>
          <el-form-item label="活动链接" label-width="80px">
            <el-input v-model="editForm.remark1" placeholder="跳转外链活动链接" autocomplete="off" />
          </el-form-item>
          <el-form-item label="活动标签" label-width="80px">
            <el-input v-model="editForm.remark2" placeholder="区分活动的标签" autocomplete="off" />
          </el-form-item>
          <el-form-item label="分享副标题" label-width="90px">
            <el-input v-model="editForm.remark3" placeholder="B站合约模板为订购按钮文字，其他模板为分享副标题" autocomplete="off" />
          </el-form-item>
          <el-form-item label="主题颜色" label-width="80px">
            <div class="block">
              <el-color-picker v-model="editColors.thc.s" />
            </div>
            <div class="block">
              <el-color-picker v-model="editColors.thc.e" />
            </div>
          </el-form-item>

          <el-form-item label="背景颜色" label-width="80px">
            <div class="block">
              <el-color-picker v-model="editColors.bgc.s" />
            </div>
            <div class="block">
              <el-color-picker v-model="editColors.bgc.e" />
            </div>
          </el-form-item>
          <el-form-item label="banner" label-width="80px">
            <el-upload
              :action="imgapi"
              list-type="picture-card"
              :file-list="bannerList"
              :on-success="bannerPreview"
              :on-remove="bannerRemove"
            >
              <i class="el-icon-plus" />
            </el-upload>
          </el-form-item>
          <el-form-item label="logo" label-width="80px">
            <el-upload
              class="avatar-uploader"
              :action="imgapi"
              :show-file-list="false"
              :on-success="logoPreview"
            >
              <img v-if="logoUrl" :src="logoUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </el-form-item>
          <el-form-item label="推广图" label-width="80px">
            <el-upload
              class="avatar-uploader"
              :action="imgapi"
              :show-file-list="false"
              :on-success="proPreview"
            >
              <img v-if="proUrl" :src="proUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </el-form-item>
          <el-form-item label="引导图" label-width="80px">
            <el-upload
              class="avatar-uploader"
              :action="imgapi"
              :show-file-list="false"
              :on-success="guidPreview"
            >
              <img v-if="guidUrl" :src="guidUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </el-form-item>
        </el-form>
        <el-tabs type="border-card" style="margin-top: 20px">
          <el-tab-pane key="orderingInfo" label="产品订购说明">
            <quill-editor
              ref="text"
              v-model="editForm.orderingInfo"
              class="myQuillEditor"
              :options="editorOption"
            />
          </el-tab-pane>
          <el-tab-pane key="givePhoneInfo" label="赠送话费说明">
            <quill-editor ref="text" v-model="editForm.givePhoneInfo" class="myQuillEditor" :options="editorOption" />
          </el-tab-pane>
        </el-tabs>
        <div class="demo-drawer__footer">
          <el-button @click="cancelForm">取 消</el-button>
          <el-button type="primary" :loading="loading" @click="$refs.editDrawer.closeDrawer()">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
        </div>
      </div>
    </el-drawer>
  </div>

</template>

<script>
import { post, get } from '@/api/common'
import { quillEditor } from 'vue-quill-editor'
export default {
  name: 'Produce',
  components: {
    quillEditor
  },
  data() {
    return {
      loading: false,
      editDialog: false,
      addDialog: false,
      imgapi: process.env.VUE_APP_BASE_IMG_API,
      cateList: [],
      searchForm: {
        cpid: '',
        categoryName: '',
        pageSize: 20,
        pageNum: 1
      },
      addForm: {
        bannerPics: '',
        cpid: '',
        activeType: '',
        isCompositeProduct: 0,
        discountInfo: '',
        memberName: '',
        pageTitle: '',
        givePhoneInfo: '赠送话费说明',
        logoPic: '',
        orderingInfo: '产品订购说明',
        originalPrice: '',
        productName: '',
        pushJumpUrl: '',
        flowJumpUrl: '',
        bgColor: '',
        themeColor: '',
        remark: '',
        remark1: '',
        remark2: '',
        remark3: '',
        spid: ''
      },
      addColors: {
        thc: { s: '', e: '' },
        bgc: { s: '', e: '' }
      },
      editForm: {
        bannerPics: '',
        cpid: '',
        activeType: '',
        isCompositeProduct: 0,
        discountInfo: '',
        memberName: '',
        pageTitle: '',
        givePhoneInfo: '赠送话费说明',
        logoPic: '',
        orderingInfo: '产品订购说明',
        originalPrice: '',
        productName: '',
        pushJumpUrl: '',
        flowJumpUrl: '',
        bgColor: '',
        themeColor: '',
        remark: '',
        remark1: '',
        remark2: '',
        remark3: '',
        spid: ''
      },
      editColors: {
        thc: { s: '', e: '' },
        bgc: { s: '', e: '' }
      },
      bannerList: [],
      logoUrl: '',
      proUrl: '',
      guidUrl: '',
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      tableData: [],
      total: 5000,
      editableTabsValue: 'orderingInfo',
      editorOption: {
        placeholder: '请在这里输入',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
            [{ 'header': 1 }, { 'header': 2 }], // 标题，键值对的形式；1、2表示字体大小
            [{ 'list': 'ordered' }, { 'list': 'bullet' }], // 列表
            [{ 'script': 'sub' }, { 'script': 'super' }], // 上下标
            [{ 'indent': '-1' }, { 'indent': '+1' }], // 缩进
            [{ 'size': ['small', false, 'large', 'huge'] }], // 字体大小
            [{ 'color': [] }, { 'background': [] }], // 字体颜色，字体背景颜色
            [{ 'font': [] }], // 字体
            [{ 'align': [] }], // 对齐方式
            ['clean'], // 清除字体样式
            ['link', 'image'] // 上传图片、上传视频
          ]
        }
      }
    }
  },
  created() {
    var that = this
    that.search()

    var updata = {
      pageSize: 99999,
      pageNum: 1
    }
    get('/cpidInfo/page', updata)
      .then((res) => {
        this.cateList = res.data.list
      }).catch((err) => {
        console.log(err)
      })
  },
  methods: {
    async search() { // 同步搜索
      await get('/productInfo/page', this.searchForm)
        .then((res) => {
          this.tableData = res.data.list
          this.total = res.data.total
        }).catch((err) => {
          console.log(err)
        })
    },
    searchBtn() { // 搜索按钮
      this.search()
    },
    reset() { // 重置
      this.searchForm = {
        cpid: '',
        categoryName: '',
        pageSize: 20,
        pageNum: 1
      }
      this.search()
    },
    add() { // 新增
      this.addDialog = true
      this.bannerList = []
      this.logoUrl = ''
      this.proUrl = ''
      this.guidUrl = ''
    },
    addHandleClose(done) { // 新增数据
      if (this.loading) return
      this.$confirm('确定要提交吗？')
        .then(_ => {
          done()
          this.addDialog = true
          this.addForm.themeColor = JSON.stringify([this.addColors.thc.s, this.addColors.thc.e])
          this.addForm.bgColor = JSON.stringify([this.addColors.bgc.s, this.addColors.bgc.e])
          post('/productInfo/create', this.addForm)
            .then((res) => {
              if (res.code === 10000) this.reset()
              setTimeout(() => {
                this.addDialog = false
              }, 400)
            })
            .catch((err) => {
              console.log(err)
            })
        })
        .catch(_ => {
          this.addDialog = false
        })
    },
    edit(e) { // 编辑
      this.bannerList = []
      this.editForm = e
      var thc = JSON.parse(e.themeColor)
      var bgc = JSON.parse(e.bgColor)
      this.editColors.thc = { s: thc ? thc[0] : '', e: thc ? thc[1] : '' }
      this.editColors.bgc = { s: bgc ? bgc[0] : '', e: bgc ? bgc[1] : '' }
      let bannerPics = ''
      if (this.editForm.bannerPics) {
        bannerPics = JSON.parse(this.editForm.bannerPics)
      } else {
        bannerPics = []
      }
      if (this.editForm.logoPic) {
        this.logoUrl = process.env.VUE_APP_BASE_IMG_URL + this.editForm.logoPic
      }
      if (this.editForm.promotionPic) {
        this.proUrl = process.env.VUE_APP_BASE_IMG_URL + this.editForm.promotionPic
      }
      if (this.editForm.guidancePic) {
        this.guidUrl = process.env.VUE_APP_BASE_IMG_URL + this.editForm.guidancePic
      }

      for (let i = 0; i < bannerPics.length; i++) {
        this.bannerList = this.bannerList.concat({
          link: bannerPics[i],
          url: process.env.VUE_APP_BASE_IMG_URL + bannerPics[i]
        })
      }
      this.editDialog = true
    },
    editHandleClose(done) { // 修改数据
      if (this.loading) return
      this.$confirm('确定要提交吗？')
        .then(_ => {
          done()
          this.editDialog = true
          this.editForm.themeColor = JSON.stringify([this.editColors.thc.s, this.editColors.thc.e])
          this.editForm.bgColor = JSON.stringify([this.editColors.bgc.s, this.editColors.bgc.e])
          post('/productInfo/update/' + this.editForm.id, this.editForm)
            .then((res) => {
              if (res.code === 10000) this.reset()
              setTimeout(() => {
                this.editDialog = false
              }, 400)
            })
            .catch((err) => {
              console.log(err)
            })
        })
        .catch(_ => {
          this.editDialog = false
        })
    },
    refresh(row) {
      post('/productInfo/update/' + row.id, row)
        .then((res) => {
          this.$notify({
            title: '刷新成功',
            message: '产品名称：' + row.productName
          })
        })
        .catch((err) => {
          console.log(err)
        })
    },
    dele(e) { // 删除
      this.$confirm('确定要删除么？')
        .then(_ => {
          post('/productInfo/delete', { ids: [e] })
            .then((res) => {
              if (res.code === 10000) this.reset()
            })
        })
    },
    cancelForm() { // 关闭抽屉
      this.loading = false
      this.editDialog = false
      this.addDialog = false
      this.bannerList = []
      this.logoUrl = ''
      this.proUrl = ''
      this.guidUrl = ''
      clearTimeout(this.timer)
    },
    handleSizeChange(e) { // 单页数量
      this.searchForm.pageSize = e
      this.search()
    },
    handleCurrentChange(e) { // 跳页
      this.searchForm.pageNum = e
      this.search()
    },
    bannerPreview(response) {
      this.bannerList = this.bannerList.concat({ link: response.data, url: process.env.VUE_APP_BASE_IMG_URL + response.data })
      var newlist = []
      for (let i = 0; i < this.bannerList.length; i++) {
        newlist = newlist.concat(this.bannerList[i].link)
      }
      this.addForm.bannerPics = JSON.stringify(newlist)
      this.editForm.bannerPics = JSON.stringify(newlist)
      console.log(this.addForm.bannerPics)
    },
    bannerRemove(file, fileList) {
      this.bannerList = fileList
      var newlist = []
      for (let i = 0; i < this.bannerList.length; i++) {
        newlist = newlist.concat(this.bannerList[i].link)
      }
      this.editForm.bannerPics = JSON.stringify(newlist)
    },
    logoPreview(file) {
      this.logoUrl = process.env.VUE_APP_BASE_IMG_URL + file.data
      this.editForm.logoPic = file.data
      this.addForm.logoPic = file.data
    },
    proPreview(file) {
      this.proUrl = process.env.VUE_APP_BASE_IMG_URL + file.data
      this.editForm.promotionPic = file.data
      this.addForm.promotionPic = file.data
    },
    guidPreview(file) {
      this.guidUrl = process.env.VUE_APP_BASE_IMG_URL + file.data
      this.editForm.guidancePic = file.data
      this.addForm.guidancePic = file.data
    }
  }
}
</script>

<style scoped lang="scss">
.block {
  float: left !important;
  margin-left: 20px;
}
.searchBox {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: #bfbfbf 0 0 2px;
  height: unset !important;
  form {
    margin: auto;
  }
}
.el-header {padding: 20px}
.el-form-item {margin-bottom: unset}
.tableBox{
  margin-top: 10px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: #bfbfbf 0 0 2px;
}
.block {
  margin-top: 20px;
  float: right;
}
.demo-drawer__content {
  padding: 20px 5%;
  line-height: 32px;
  .el-form-item {
    margin-top: 20px;
  }
  .demo-drawer__footer {
    margin-top: 20px;
    display: flex;
    button {
      flex: 1;
    }
  }
  .ql-editor {height: 250px}
}

.avatar-uploader {
  .el-upload {
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
}
.avatar-uploader-icon {
  background-color: #fbfdff;
  font-size: 28px;
  color: #8c939d;
  width: 148px;
  height: 148px;
  line-height: 148px;
  text-align: center;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
}
.avatar-uploader-icon:hover {
  border-color: #409EFF;
}
.avatar {
  width: 148px;
  height: 148px;
  display: block;
}
</style>
