
<template>
  <div class="cityList app-container">
     <div class="search">
      <div>
        <el-input
          v-model="query.title"
          size="small"
          placeholder="请输入产品名称"
          clearable
          class="item-width-200 "
        ></el-input>
          <el-select v-model="query.regionCode" size="small" filterable clearable class="item-width-200 ml10" placeholder="请选择区域">
              <el-option
                v-for="item in cityOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-select v-model="query.productType" size="small" filterable clearable class="item-width-200 ml10" placeholder="请选择类型">
              <el-option
                v-for="(item,key) in productType"
                :key="key"
                :label="item"
                :value="key">
              </el-option>
            </el-select>
        <el-button
        class="ml10"
        type="primary"
        size="small"
        icon="el-icon-search"
        @click="handleSearch"
      >
        搜索
      </el-button>
      </div>
       <el-button class="add-btn" type="primary" size="small" @click="handleAdd"
        >添加</el-button
      >
    
    </div>

    <el-table
      :data="tableData"
      tooltip-effect="dark"
      border
      v-loading="loading"
      style="width: 100%"
    >
     <el-table-column
      align="center"
      type="selection"
      width="55">
    </el-table-column>
     <el-table-column
        width="250px"
        align="center"
        label="产品信息"
        prop="产品信息"
        show-overflow-tooltip
      >
      <template slot-scope="scope">
        <div class="info">
          <el-image
          v-if="scope.row.cover&&scope.row.cover.length"
          :src="scope.row.cover[0]"
            class="small-img"
            style="width: 40px; height: 40px;"
            fit="cover"
            >
            </el-image>
            <span class="ml10">{{scope.row.title}}</span>
        </div>
      </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="价格"
        prop="salePrice"
        show-overflow-tooltip
      >
      </el-table-column>
       <el-table-column
        align="center"
        label="销量"
        prop="salesCount"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        align="center"
        label="热度"
        prop="hotCount"
        show-overflow-tooltip
      >
      </el-table-column>
       <el-table-column
        align="center"
        label="区域"
        prop="regionCode"
        show-overflow-tooltip
      >
      </el-table-column>
       <el-table-column
        align="center"
        label="产品类型"
        prop="productType"
        show-overflow-tooltip
      >
      <template slot-scope="scope">
        {{productType[scope.row.productType]||'暂无分类'}}
      </template>
      </el-table-column>
       <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleEdit(scope.row)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
    </el-table>
    <div class="page-box">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
        :current-page="query.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="query.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <el-dialog :title="title" width="550px" :visible.sync="dialogFormVisible">
    <el-form label-width="130px" :model="setQuery"
      ref="setQuery"
      :rules="rules">
        <el-form-item label="产品类型" prop="productType">
          <el-select
              v-model="setQuery.productType"
              class="item-width-300"
              placeholder="请选择产品类型"
              :disabled="title == '编辑'"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
        </el-form-item>
          <el-form-item label="产品图片：" prop="cover">
          <Upload
            type="logoPath"
            id="logoPath"
            width="250px"
            height="150px"
            uploadType="OTHER"
            :imgUrl="setQuery.cover[0]"
            @uploadEnd="uploadEnd"
          ></Upload>
        </el-form-item>
         <el-form-item label="产品名称"  prop="title">
            <el-input
            v-model="setQuery.title"
            class="item-width-300"
            ></el-input>
        </el-form-item>
        <el-form-item label="跳转地址" v-if="setQuery.productType == 'Web'"  prop="meta.url">
            <el-input
            v-model="setQuery.meta.url"
            class="item-width-300"
            ></el-input>
        </el-form-item>
        <el-form-item label="地址" >
            <el-input
            v-model="setQuery.address"
            class="item-width-300"
            ></el-input>
        </el-form-item>
         <el-form-item label="区域"  prop="regionCode">
            <el-input
            v-model.number="setQuery.regionCode"
            class="item-width-300"
            :disabled="title == '编辑'"
            ></el-input>
        </el-form-item>
         <el-form-item label="经度" >
            <el-input
            v-model.number="setQuery.locationPoint.longitude"
            class="item-width-300"
            ></el-input>
        </el-form-item>
         <el-form-item label="纬度">
            <el-input
            v-model.number="setQuery.locationPoint.latitude"
            class="item-width-300"
            ></el-input>
        </el-form-item>
         <el-form-item label="售价" >
            <el-input
            v-model.number="setQuery.salePrice"
            class="item-width-300"
            ></el-input>
        </el-form-item>
         <el-form-item label="原价">
            <el-input
            v-model.number="setQuery.originalPrice"
            class="item-width-300"
            ></el-input>
        </el-form-item>
         <el-form-item label="热度">
            <el-input
            v-model.number="setQuery.hotCount"
            class="item-width-300"
            ></el-input>
        </el-form-item>
          <el-form-item label="销量">
            <el-input
            v-model.number="setQuery.salesCount"
            class="item-width-300"
            ></el-input>
        </el-form-item>

    </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" :loading="btnLoading" @click="save">确 定</el-button>
  </div>
</el-dialog>


  </div>
</template>
  
  <script>
import { debounce } from "@/utils/index";
import { getCityList } from "@/api/common";
import { goodsStoreList,setHidden,listAllTypes,upsertProduct} from "@/api/goods";
import guid from "@/utils/guid";
import Upload from "@/components/Upload";

export default {
  name: "productLibrary",
  components: {
    Upload,
  },
  data() {
    return {
      title:'',
      tableData: [],
      loading: false,
      btnLoading: false,
      dialogFormVisible: false,
      btnLoading1: false,
      dialogFormVisible1: false,
      btnLoading2: false,
      dialogFormVisible2: false,
      query: {
        regionCode:'',
        productType:'',
        title:'',
        page: 1,
        size: 10,
      },
      total: 0,
      setQuery1:{
        type:''
      },
      setQuery:{
       cover:[],
       productType:'',
       title:'',
       regionCode:0,
       salePrice:0,
       originalPrice:0,
       hotCount:0,
       address:'',
       locationPoint:{
          longitude: 0,
          latitude: 0
        }
      },
      originalQuery: {},
      topFrom:{
        pid:"",
        top:0
      },
      typeOptions:[],
      tabList:[],
      rules:{
         productType: [{ required: true, message: "请选择产品类型", trigger: "change" }],
         cover: [{ required: true, message: "请上传产品图片", trigger: "change" }],
         regionCode: [{ required: true, message: "请输入区域", trigger: "blur" }],
         title: [{ required: true, message: "请输入产品名称", trigger: "blur" }],
         'meta.url': [{ required: true, message: "请输入跳转链接", trigger: "blur" }],
         
      },
      rules1:{
         type: [{ required: true, message: "请选择产品类型", trigger: "change" }],
      },
      rules2:{
         top: [{ required: true, message: "请输入排序", trigger: "blur" }],
      },
      productType:{
        'Web'
				    :'链接',
				'Recharge'
				    :'充值类',
				'Scenic'
				    :'景区',
				'ScenicTicket'
				    :'景区门票',
				'StudyTour'
				    :'研学旅游',
				'Hotel'
				    :'酒店',
				'HotelRoom'
				    :'酒店房型',
				'Cinema'
				    :'电影院',
				'MovieTicket'
				    :'电影票',
				'Restaurant'
				    :'餐厅',
				'RestaurantFood'
				    :'餐厅美食',
				'CarMaintain'
				    :'汽车保养门店',
				'CarMaintainGoods'
				    :'汽车保养商品',
				'CarMaintainService'
				    :'汽车保养服务',
				'Shop'
				    :'店铺',
				'ShopGoods'
				    :'店铺商品',
				'ShopService'
				    :'店铺服务',
				'Coupon'
				    :'优惠券',
				'PetrolStation'
				    :'加油站',
			
      },
      cityOptions:[]
    };
  },
  computed: {
    options() {
      if(this.title == '添加'){
        return [{
          value:"Web",
          label:"Web链接"
        }]
      }else{
        return this.typeOptions

      }

    }
  },
  methods: {
    // 图片统一上传
    uploadEnd(val) {
      this.setQuery.cover[0] = val.url;
    },
    handleTab(val){
      this.query.productType = val
      this.handleSearch()
    },
    handleSetting(){
      this.dialogFormVisible1 = true
      
    },
    handleSearch(){
        this.query.page = 1;
        this.getList();
    },
    handleEdit(row){
      console.log(row);
        this.title = '编辑'
      this.dialogFormVisible = true
      // this.setQuery = JSON.parse(JSON.stringify(row)) 
      this.setQuery = {
        cover: row.cover||[],
        productType: row.productType,
        regionCode: row.regionCode,
        title: row.title||'',
        pid: row.pid||'',
        top: row.top||0,
        hidden: row.hidden,
        salesCount: row.salesCount||0,
        originalPrice: row.originalPrice||0,
        salePrice: row.salePrice||0,
        hotCount: row.hotCount||0,
        address: row.address||'',
        locationPoint:row.locationPoint ||{
          longitude: 0,
          latitude: 0
        }
      }
      if(row.productType == 'Web'){
        this.setQuery.meta = row.meta
      }
      this.originalQuery = JSON.parse(JSON.stringify(this.setQuery))
    },
    handleAdd() {
        this.title = '添加'
      this.dialogFormVisible = true
      this.setQuery = {
        cover: [],
        productType: '',
        regionCode: '',
        title: '',
        pid: guid(),
        meta: {
          url: '',
        },
        top: 0,
        hidden: false,
        salesCount: 0,
        originalPrice: 0,
        salePrice: 0,
        hotCount: 0,
        address:'',
        locationPoint:{
          longitude: 0,
          latitude: 0
        }
      }
    },

    handleTop(row){
      this.topFrom.pid = row.pid
      this.dialogFormVisible2 = true
      this.topFrom.top = row.top
    },
    // 删除
     handleDel(id) {
       this.$confirm(`此操作将拉黑该数据, 是否继续?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          setHidden({pids:[id],hidden:true}).then(res=>{
            if(res.state == 'Success'){
               this.$notify({
                title: '成功',
                message: '操作成功',
                type: 'success'
              });
              this.getList()
            }
          })
        })
    },
    handleSizeChange(val) {
      this.query.page = 1;
      this.query.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.query.page = val;
      this.getList();
    },

    search() {
      this.query.page = 1;
      this.getList();
    },
    getList() {
      this.loading = true
      let query = JSON.parse(JSON.stringify(this.query))
      query.page-=1
      goodsStoreList(query).then((res) => {
        this.loading = false
        if (res.state == "Success") {
          this.tableData = res.content.content;
          this.total = res.content.totalElements
        }
      });
    },
    listAllTypes(){
       listAllTypes().then((res) => {
        if (res.state == "Success") {
          res.content.map(item=>{
            this.typeOptions.push({
              value:item.productType,
              label:item.productTypeDesc
            })
          })
        }
      });
    },
    getCityList() {
      this.loading = true
      getCityList({name:'',
        page: 0,
        size: 999,}).then((res) => {
        this.loading = false
        if (res.state == "Success") {
          this.cityOptions = res.content.content.map(item => {
            return {
              value: item.code,
              label: item.name
              }
            })
        }
      });
    },
    save(){
        this.$refs.setQuery.validate((v) => {
        if (v) {
          this.btnLoading = true
          let obj ={}
          if(this.title == '编辑'){//只传发生变化了的参数
            for (const key in this.setQuery) {
              if( typeof this.setQuery[key] == 'object'){
                if(JSON.stringify(this.originalQuery[key]) != JSON.stringify(this.setQuery[key]) ){
                    obj[key] = this.setQuery[key]
                }
              }else{
                if (this.originalQuery[key] != this.setQuery[key]) {
                         obj[key] = this.setQuery[key]
                }
              }
            }
            obj.regionCode = this.setQuery.regionCode
            obj.productType = this.setQuery.productType
            obj.pid = this.setQuery.pid
          }else{
            obj = this.setQuery
          }
          console.log(obj);

          upsertProduct([obj]).then(res=>{
            this.btnLoading = false
            if(res.state == 'Success'){
                this.dialogFormVisible = false
              this.$notify({
                  title: '成功',
                  message: '操作成功',
                  type: 'success'
                });
                this.query.page = 1
                this.getList();

            }
          })
              
        }
      });
    },
  
  },
  created() {
    this.getList();
    this.listAllTypes()
    this.getCityList()
  },
};
</script>
  
<style lang="scss" >
.cityList {
  .tab-list{
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    .tab{
      font-size: 16px;
      color: #222;
      cursor: pointer;
    }
    .tab+.tab{
      margin-left: 10px;
    }
    .tab.active{
      color: #2836fe;
      font-weight: bold;
    }
  }
  .info{
    display: flex;
    align-items: center;
    .small-img{
      width: 40px;
      height: 40px;
    }
  }
}
</style>
  