<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="search.keyWord" placeholder="关键字" style="width: 200px;" class="filter-item" />
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="searchData">
        搜索
      </el-button>
      <el-button
        v-if="!isChoose"
        class="filter-item"
        style="margin-left: 10px;"
        type="primary"
        icon="el-icon-plus"
        @click="handleCreateAdd">
        增加产品档案
      </el-button>
      <div class="top-right-btn">
        <el-tooltip class="item" effect="dark" content="刷新" placement="top">
          <el-button size="mini" circle icon="el-icon-refresh" @click="getProductInfo" />
        </el-tooltip>
      </div>
    </div>
    <el-table
      :data="tableData"
      v-loading="listLoading"
      row-key="id"
      size="mini"
      border
      align="center"
      default-expand-all>
      <el-table-column
        prop="id"
        label="产品档案id">
      </el-table-column>
      <el-table-column
        prop="productName"
        width="120px"
        show-overflow-tooltip
        label="产品名称">
      </el-table-column>
      <el-table-column
        prop="productTypeName"
        label="类目名称">
      </el-table-column>
      <el-table-column
        prop="productUnit"
        label="产品单位">
      </el-table-column>
    <el-table-column
      prop="productUnit"
      label="部件列表"
      width="130px"
      v-if="!isChoose">
        <template slot-scope="{row}">
        <el-button
          @click="$router.push({path:'/productFile/partInfo/'+row.id,query:{'idProduct':row.id,'productName':row.productName}})"
          type="success"
size="mini">
         查看部件列表
        </el-button>
      </template>
    </el-table-column>
      <el-table-column
        prop="priceFlag"
        label="报价方式">
        <template slot-scope="{row}">
          <span v-if="row.priceFlag==0">脚本报价</span>
          <span v-if="row.priceFlag==1">suk报价</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="productUnit"
        label="产品属性"
        v-if="!isChoose"
        width="180px">
        <template slot-scope="{row}">

          <el-button title='查看产品属性' icon="el-icon-circle-check" @click="specList(row.id,row.productName)" v-if="row.priceFlag==1" type="success" size="mini" class="operateBtn">

          </el-button>
          <el-button title='脚本报价' icon="el-icon-circle-plus-outline" @click="openPriceScript(row.id,row.productName)" v-if="row.priceFlag==0" type="success" size="mini" class="operateBtn">

          </el-button>
          <el-button title='报价参数' icon="el-icon-remove-outline" @click="openScriptItem(row.id,row.productName)" v-if="row.priceFlag==0" type="warning" size="mini" class="operateBtn">

          </el-button>
          <el-button title='初始化脚本' icon="el-icon-circle-close" @click="initScript(row.id)" v-if="row.priceFlag==0" type="danger" size="mini" class="operateBtn">

          </el-button>
        </template>
      </el-table-column>
      <el-table-column
        label="产品详情"
        v-if="!isChoose"
        align="center"
        width="120px">
        <template slot-scope="{row}">
          <el-button @click='$router.push({path:"/productFile/productDetile/"+row.id,query:{"idProduct":row.id,"productName":row.productName}})' type="success" size="mini" class="operateBtn">
            产品详情
          </el-button>
        </template>
      </el-table-column>
      <el-table-column
        label="产品图片"
        align="center">
        <template slot-scope="{row}">
          <el-image
            style="width: 60px; height: 60px"
            v-if="row.productImage"
            :src="row.productImage"></el-image>
        </template>
      </el-table-column>
      <el-table-column
        label="宣传图片"
        v-if="!isChoose"
        align="center"
        width="120px">
        <template slot-scope="{row}">
          <el-button @click='$router.push({path:"/productFile/productImgList",query:{"idProduct":row.id,"productName":row.productName}})' type="warning" size="mini" class="operateBtn">
            宣传图片
          </el-button>
        </template>
      </el-table-column>
      <el-table-column
        prop="photoFixFlag"
        label="是否修图">
       <template slot-scope="{row}">
        <span v-if="row.photoFixFlag==1">是</span>
        <span v-if="row.photoFixFlag==0">否</span>
      </template>
      </el-table-column>

      <el-table-column align="center" label="状态" class-name="status-col" width="100">
        <template slot-scope="{row}">
          <el-tag v-if="row.voidFlag==0" type="success">
            启用
          </el-tag>
          <el-tag v-else-if="row.voidFlag==1" type="danger">
            禁用
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="上架状态" class-name="status-col" width="100">
        <template slot-scope="{row}">
          <el-tag v-if="row.saleFlag==0" type="success">
            上架中
          </el-tag>
          <el-tag v-else-if="row.saleFlag==1" type="danger">
            已下架
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="left" width="230" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <template v-if="!isChoose">

          <el-button @click="handleUpdate(row)" type="primary" size="mini">
            编辑
          </el-button>
          <el-button @click="editStatus(row.id,'1')" type="danger" v-if="row.voidFlag==0" size="mini">
          禁用
        </el-button>
          <el-button @click="editStatus(row.id,'0')" v-else-if="row.voidFlag==1" size="mini">
            启用
          </el-button>
          <el-button @click="editSaleFlag(row.id,'1')" type="warning" v-if="row.saleFlag==0" size="mini">
            下架
          </el-button>
          <el-button @click="editSaleFlag(row.id,'0')" v-else-if="row.saleFlag==1" size="mini">
            上架
          </el-button>

          </template>
          <template v-else>
            <el-button @click="sourceType == 1? chooseThisTo(row):chooseThis(row)" type="primary" size="mini">
              选择
            </el-button>
          </template>

        </template>
      </el-table-column>

    </el-table>
    <pagination
v-show="listData.total>0"
:total="listData.total"
:page.sync="listData.page"
                :limit.sync="listData.pageSize"
@pagination="getProductInfo" />

    <el-dialog  :close-on-click-modal="false" :title="dialogTitle" :visible.sync="dialogVisible" width="800px">
      <el-form label-width="100px" label-position="right">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="产品名称">
              <el-input v-model="form.productName" ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="产品类型">
              <el-select v-model="form.idType" placeholder="请选择" style="width: 270px">
                <el-option
                  v-for="type in typeOptions"
                  :key="type.id"
                  :label="type.productTypeName"
                  :value="type.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="拼版方式">
              <el-select v-model="form.makeUpType" placeholder="请选择" style="width: 270px">
                <el-option
                  v-for="type in makeUpTypes"
                  :key="type.value"
                  :label="type.label"
                  :value="type.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="产品单位">
              <el-input v-model="form.productUnit"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="报价方式">
              <el-select v-model="form.priceFlag" filterable placeholder="请选择" style="width: 270px">
                <el-option
                  v-for="item in priceFlagList"
                  :key="item.id"
                  :label="item.tagName"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工单前缀">
              <el-input v-model="form.billPrefix"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="订单前缀">
              <el-input v-model="form.orderPrefix"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否修图">
              <el-radio v-model="form.photoFixFlag" :label="1">是</el-radio>
              <el-radio v-model="form.photoFixFlag" :label="0">否</el-radio>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="p数计价规则">
              <el-select v-model="form.idProductPriceInfo" placeholder="请选择" style="width: 270px">
                <el-option
                  v-for="item in pagePriceOptions"
                  :key="item.id"
                  :label="item.priceName"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="产品图片">
              <!--              {{imageUrl}}-->
              <el-upload
                class="avatar-uploader"
                action="apis/upload/uploadProductImage"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogStatus==='1'?addBtn():editBtn()">确 定</el-button>
      </div>
    </el-dialog>
<!--    <servicedialog @tableRefresh="tableRefresh" ref="menuDialog" :dialogStatus="dialogStatus" :menuId="menuId" :titleDialog="titleDialog" :dialogVisible="dialogVisible"/>-->
    <cancledialog @tableRefresh="tableRefresh" ref="confirmDialog"></cancledialog>
  </div>
</template>

<script>
import { getProductInfoList, addProductInfo, getProductInfoById, updateProductInfo, getProductskeuList } from '@/api/productFile/productInfo.js'
import { getProductTypeList } from '@/api/productFile/productType.js'
import { getAvailableProductPagePriceList } from '@/api/productFile/pagePrice'
import Cancledialog from '@/components/Dialog/Cancledialog.vue'

const form = {
  id: '',
  productName: '', // 产品名称
  categoryName: '', // 类目名称
  productUnit: '', // 产品单位
  priceFlag: '', // 报价方式 0脚本报价 1sku报价
  photoFixFlag: '', // 是否修图、判断该产品的订单是否在修图流程中流转
  idSkuCategory: '',
  idType: '',
  makeUpType: '',
  billPrefix: '',
  orderPrefix: '',
  productImage: '',
  idProductPriceInfo: ''
}

export default {
  components: {
    Cancledialog
  },
  data() {
    return {
      dialogStatus: 1, // 1增加，2修改
      dialogTitle: '',
      dialogVisible: false,
      search: {
        keyWord: ''
      },
      priceFlagList: [
        {
          id: 1,
          tagName: '脚本报价',
          value: 0
        },
        {
          id: 2,
          tagName: 'suk报价',
          value: 1
        }
      ],
      form: Object.assign({}, form),
      listData: {
        total: 0,
        page: 1,
        pageSize: 10
      },

      typeOptions: [],
      pagePriceOptions:[],
      makeUpTypes: [
        {
          label: '合版',
          value: 0
        },
        {
          label: '专版',
          value: 1
        }
      ],


      confirmdialog: false,
      listLoading: false,
      tableData: [],
      menuId: '',

      imageUrl: ''
    }
  },
  props: {
    isChoose: {
      type: Boolean,
      default: false
    },
    /**
     * 调用来源
     * 0 普通调用
     * 1 查询统计调用
     */
    sourceType: {
      type: Number,
      default: 0
    }
  },
  mounted() {
    this.getProductInfo()
    this.getProductType()
    this.getPagePrice()
  },
  methods: {
    // 获取列表
    getProductInfo() {
      const _that = this
      _that.listLoading = true

      var params = _that.search
      var page = {
        pageIndex: _that.listData.page,
        pageSize: _that.listData.pageSize
      }
      var data = {
        'params': JSON.stringify(params),
        'page': JSON.stringify(page),
      }

      getProductInfoList(data).then(response => {
        console.log(response)
        const data = response.data
        // //  组合表单数据
        _that.tableData = data
        // console.log(_that.tableData)
        _that.listData.total = response.total
        _that.listLoading = false
      }).catch(err => {
        _that.$message.error(err)
        _that.listLoading = false
      })
    },

    // 获取纸张类型列表
    getProductType() {
      const _that = this
      _that.listLoading = true
      var data = {
        'params': JSON.stringify({
          'voidFlag': 0
        })
      }
      // console.log(data);
      getProductTypeList(data).then(response => {
        // console.log(response)
        const data = response.data
        _that.typeOptions = data
      }).catch(err => {
      })
    },

    // 获取产品P数计价规则列表
    getPagePrice() {
      const _that = this
      _that.listLoading = true
      var data = {
        'params': JSON.stringify({
          'voidFlag': 0
        })
      }
      // console.log(data);
      getAvailableProductPagePriceList(data).then(response => {
        // console.log(response)
        const data = response.data
        _that.pagePriceOptions = data
      }).catch(err => {
      })
    },
    // 查看部件列表
    partList(idProduct, productName) {
      this.$router.push({ path: '/productFile/partInfo/' + idProduct, query: { 'idProduct': idProduct, 'productName': productName }})
    },
    // 查看产品属性
    specList(idProduct, productName) {
      this.$router.push({ path: '/productFile/spec/' + idProduct, query: { 'idProduct': idProduct, 'productName': productName }})
    },
    // 脚本报价
    openPriceScript(idProduct, productName) {
      this.$router.push({ path: '/productFile/priceScript/' + idProduct, query: { 'idProduct': idProduct, 'productName': productName }})
    },
    openScriptItem(idProduct, productName) {
      this.$router.push({ path: '/productFile/priceScriptItem/' + idProduct, query: { 'idProduct': idProduct, 'productName': productName }})
    },
    // 初始化脚本
    initScript(id) {
      var _that = this
      var data = {
        idProduct: id
      }
      var url = '/product/initProductPriceScript'
      _that.$refs.confirmDialog.updataClick(data, url)
    },
    // 增加产品档案
    handleCreateAdd() {
      const _that = this
      _that.form = Object.assign({}, form),
      _that.dialogTitle = '增加产品档案'
      _that.dialogStatus = '1'
      _that.dialogVisible = true
      _that.nameTitle = '请选择'
      _that.imageUrl = ''
    },

    // 上传图片
    handleAvatarSuccess(res, file) {
      // console.log(res);
      // console.log(file);
      this.imageUrl = res.data[0]
      this.form.productImage = this.imageUrl
    },
    beforeAvatarUpload(file) {
      // const isJPG = file.type === 'image/jpeg';
      // const isLt2M = file.size / 1024 / 1024 < 2;
      //
      // if (!isJPG) {
      //   this.$message.error('上传头像图片只能是 JPG 格式!');
      // }
      // if (!isLt2M) {
      //   this.$message.error('上传头像图片大小不能超过 2MB!');
      // }
      // return isJPG && isLt2M;
    },
    // 刷新变革
    tableRefresh() {
      // 刷新变革
      this.getProductInfo()
    },
    // 增加产品档案
    addBtn() {
      const _that = this
      var printerTypeInfo = JSON.stringify(_that.form)
      var data = {
        'productInfo': printerTypeInfo
      }
      // console.log(data);
      // return

      addProductInfo(data).then(res => {
        // console.log(res);
        if (res.httpCode == 200) {
          _that.dialogVisible = false
          _that.$message({
            message: '增加成功',
            type: 'success'
          })
          _that.tableRefresh()
        } else {
          _that.$message.error(res.msg)
        }
      }).catch(err => {
        _that.$message.error(err)
        _that.dialogVisible = true
      })
    },

    // 唤起修改
    handleUpdate(row) {
      const _that = this
      _that.form = Object.assign({}, form),

      _that.dialogTitle = '修改产品档案信息'
      _that.dialogVisible = true
      _that.dialogStatus = '2'
      _that.nameTitle = '请选择'
      _that.imageUrl = ''

      var idPrint = row.id
      var data = {
        idProduct: idPrint
      }

      // console.log(data);
      getProductInfoById(data).then(res => {
        // console.log(res);
        const data = res.data

        _that.form = {
          id: data.id,
          productName: data.productName, // 产品名称
          categoryName: data.categoryName, // 类目名称
          idSkuCategory: data.idSkuCategory,
          productUnit: data.productUnit, // 产品单位
          priceFlag: data.priceFlag, // 报价方式 0脚本报价 1sku报价
          photoFixFlag: data.photoFixFlag,
          idType: data.idType,
          makeUpType: data.makeUpType,
          billPrefix: data.billPrefix,
          orderPrefix: data.orderPrefix,
          productImage: data.productImage,
          idProductPriceInfo: data.idProductPriceInfo
        }
        _that.nameTitle = data.categoryName
        _that.imageUrl = data.productImage
      }).catch(err => {
        _that.$message.error(err)
      })
    },
    // 修改产品档案
    editBtn() {
      const _that = this
      var printerTypeInfo = JSON.stringify(_that.form)
      var data = {
        'productInfo': printerTypeInfo
      }
      // console.log(data);
      // return;
      updateProductInfo(data).then(res => {
        // console.log(res);
        if (res.httpCode == 200) {
          _that.dialogVisible = false
          _that.$message({
            message: '修改成功',
            type: 'success'
          })
          _that.tableRefresh()
        } else {
          _that.$message.error(res.msg)
        }
      }).catch(err => {
        _that.$message.error(err)
        _that.dialogVisible = true
      })
    },

    // 启用禁用
    editStatus(id, status) {
      var _that = this
      console.log(id)
      var printerTypeInfo = {
        id: id,
        voidFlag: status
      }
      var params = {
        'productInfo': JSON.stringify(printerTypeInfo)
      }

      var url = '/product/voidProductInfo'
      _that.$refs.confirmDialog.updataClick(params, url)
    },

    // 上下架
    editSaleFlag(id, saleFlag) {
      var _that = this
      console.log(id)
      var printerTypeInfo = {
        id: id,
        saleFlag: saleFlag
      }
      var params = {
        'productInfo': JSON.stringify(printerTypeInfo)
      }

      var url = '/product/saveSaleFlag'
      _that.$refs.confirmDialog.updataClick(params, url)
    },

    // 搜索
    searchData() {
      this.listData.page = 1
      this.getProductInfo()
    },

    // 弹窗内选择操作
    chooseThis(row) {
      // console.log('点击选择');
      this.$emit('chooseProduct', row)
    },

    // 查询统计选择
    chooseThisTo(row) {
      var data = {
        id: row.id,
        name: row.productName
      }
      this.$emit('chooseRow', data)
    },
  }
}
</script>

<style>

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d1c7;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
  }
  .avatar {
    width: 80px;
    height: 80px;
    display: block;
  }
</style>
<style lang="scss" scoped>
  .filter-container {
    margin-bottom: 15px;
  }
  .operateBtn{
    margin: 5px 0;
  }
</style>
