<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">{{$t('cuxiao.home')}}</el-breadcrumb-item>
      <el-breadcrumb-item>{{$t('cuxiao.yuiquangl')}}</el-breadcrumb-item>
      <el-breadcrumb-item>{{$t('cuxiao.zxhd')}}</el-breadcrumb-item>
    </el-breadcrumb>
    <div style="margin-top: 30px;display: flex;align-items: center;">
      <el-button v-for="item in storeList" :type="dqmd==item.id?'primary':'info'" class="biaoqian" @click="xuanzhemd(item.id)">{{item.posName}}</el-button>
    </div>
    <el-row :gutter="10" style="margin-top: 20px;margin-bottom: 20px;">
      <el-col :span="1.5">
        <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
        >{{$t('cuxiao.AddCX')}}</el-button>
      </el-col>
    </el-row>
    <el-table ref="filterTable" v-loading="loding"  :data="tableData" :header-cell-style="{background:'#f0f0f0'}">
      <el-table-column
          prop="id"
          label="id"
      >
      </el-table-column>
      <el-table-column
          prop="salesName"
          :label="$t('cuxiao.hdmc')"
      >
      </el-table-column>
      <el-table-column
          prop="salesType"
          :label="$t('cuxiao.qmfs')"
          width="200"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.salesType == '1'">{{$t('cuxiao.qmyf')}}</span>
          <span v-else-if="scope.row.salesType == '2'">{{$t('cuxiao.ddjdz')}}</span>
          <span v-else-if="scope.row.salesType == '3'">{{$t('cuxiao.ddjdk')}}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column
          prop="endTime"
          :label="$t('cuxiao.jsrq')"
          width="200"
      >
      </el-table-column>
      <el-table-column
          prop="salesState"
          :label="$t('cuxiao.hdzt')"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.salesState == '0'">{{$t('cuxiao.salesStateKq')}}</span>
          <span v-else-if="scope.row.salesState == '1'">{{$t('cuxiao.salesStateTy')}}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column
          fixed="right"
          :label="$t('mendian.operate')"
          width="120">
        <template slot-scope="scope">
          <el-button @click="handleUpdate(scope.row)" type="text" size="small">{{$t('cuxiao.modify')}}</el-button>
          <el-button @click="delechansu(scope.row)" type="text" size="small">{{$t('cuxiao.delete')}}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="width: 100%;display: flex;justify-content: flex-end;">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryParams.page"
          :page-size="queryParams.size"
          layout="total, prev, pager, next"
          :total="total">
      </el-pagination>
    </div>
    <!-- 添加或修改门店分类对话框 -->
    <el-dialog :title="text" :visible.sync="open" :width="$t('loding.language')=='en'||$t('loding.language')=='vi'?'650px':'600px'" append-to-body>
      <el-alert
          v-if="!form.edit"
          :title="$t('cuxiao.bnxg')"
          type="error"
          show-icon
          :closable="false"
          style="margin-bottom: 16px;"
      />
      <el-form ref="form" :model="form" :rules="rules" :label-width="$t('loding.language')=='en'||$t('loding.language')=='vi'?'180px':'100px'">
        <el-form-item :label="$t('quanyi.md')">
          <el-select :disabled="!form.edit" v-model="form.shId" :placeholder="$t('quanyi.xcmd')" style="width: 180px;" >
            <el-option v-for="item in storeList" :key="item.id" :label="item.posName" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('cuxiao.hdmc')" prop="salesName">
          <el-input v-model="form.salesName" :placeholder="$t('cuxiao.hdmcms')" :readonly="!form.edit"/>
        </el-form-item>
        <el-form-item :label="$t('cuxiao.hdhb')" prop="poster">
          <el-upload
              class="avatar-uploader"
              :action="seruer+'/utils/Upload'"
              :show-file-list="false"
              :on-success="handleAvatarlogo"
              :before-upload="beforeAvatarUpload">
            <img v-if="form.poster" :src="seruer+form.poster" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item :label="$t('cuxiao.qmfs')" prop="salesType">
          <el-radio :disabled="!form.edit" v-model="form.salesType" label="1">{{$t('cuxiao.qmyf')}}</el-radio>
          <el-radio :disabled="!form.edit" v-model="form.salesType" label="2">{{$t('cuxiao.ddjdz')}}</el-radio>
          <el-radio :disabled="!form.edit" v-model="form.salesType" label="3">{{$t('cuxiao.ddjdk')}}</el-radio>
        </el-form-item>
        <el-form-item :label="$t('cuxiao.qmz')" prop="salesReduction">
          <el-input type="number" v-model="form.salesReduction" :placeholder="$t('cuxiao.qmzsm')" :readonly="!form.edit"/>
        </el-form-item>
        <el-form-item :label="$t('cuxiao.sytj')" prop="salesCondition">
          <el-input type="number" v-model="form.salesCondition" :placeholder="$t('cuxiao.sytjsm')" :readonly="!form.edit"/>
        </el-form-item>
        <el-form-item :label="$t('cuxiao.salesFund')" prop="salesFund">
          <el-input type="number" v-model="form.salesFund" :placeholder="$t('cuxiao.salesFundsm')" :readonly="!form.edit"/>
        </el-form-item>
        <el-form-item :label="$t('cuxiao.endTime')" prop="endTime">
<!--          <el-input v-model="form.endTime" :placeholder="$t('cuxiao.endTimesm')" />-->
          <el-date-picker clearable
                          v-model="form.endTime"
                          type="date"
                          value-format="yyyy-MM-dd"
                          :placeholder="$t('cuxiao.endTimesm')" :readonly="!form.edit">
          </el-date-picker>
        </el-form-item>
        <el-form-item :label="$t('cuxiao.salesState')" prop="salesState">
          <el-radio v-model="form.salesState" label="0">{{$t('cuxiao.salesStateKq')}}</el-radio>
          <el-radio v-model="form.salesState" label="1">{{$t('cuxiao.salesStateTy')}}</el-radio>
        </el-form-item>
        <el-form-item :label="$t('cuxiao.illustrate')" prop="illustrate">
          <el-input v-model="form.illustrate" type="textarea" :placeholder="$t('cuxiao.illustrate')" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="tijiaobaocun">{{$t('mendian.determine')}}</el-button>
        <el-button @click="cancel">{{$t('mendian.cancellation')}}</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {storelistlist,getordfenlei,getidlist,setposfood,delefood} from '@/api/food';
import {getshSalesPromotion, listshSalesPromotion,addshSalesPromotion,updateshSalesPromotion,delshSalesPromotion} from '@/api/promotion'
import googmap from "@/components/googmap.vue";
import Bus from "@/utils/Bus";
export default{
  name:"AcidrollingCapacity",
  components:{
    googmap
  },
  data(){
    return {
      seruer: process.env.VUE_APP_BASE_URL ,
      loding:false,
      tableData:[],
      total:0,
      checkList:[],
      //分页
      queryParams: {
        page: 1,
        size: 10,
        language:null,
        shId:null,
      },
      storeList: [], // 门店列表
      selectedStoreId: '', // 当前选中的门店ID
      fenlei:[],
      fwlxlist:[],
      open:false,
      opmap:false,
      form:{edit:true},
      user:{},
      mdid:'',
      // 表单校验
      rules: {
        salesName: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error(this.$t('cuxiao.hdmcEpty')));
              } else {
                callback();
              }
            },
            trigger: 'blur'
          }
        ],
        salesType: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error(this.$t('cuxiao.qmfsEmty')));
              } else {
                callback();
              }
            },
            trigger: 'blur'
          }
        ],
        endTime: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error(this.$t('cuxiao.endTimeEmty')));
              } else {
                callback();
              }
            },
            trigger: 'blur'
          }
        ],
        salesState: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value && value !== 0) {
                callback(new Error(this.$t('cuxiao.salesStateEmty')));
              } else {
                callback();
              }
            },
            trigger: 'blur'
          }
        ],
        salesReduction:[
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value && value !== 0) {
                callback(new Error(this.$t('cuxiao.salesReductionEmty')));
              } else if (this.form.salesType != 1 && value <= 0) {
                callback(new Error(this.$t('cuxiao.salesReduction0')));
              } else {
                callback();
              }
            },
            trigger: 'blur'
          }
        ],
      },
      mapaddress:null,
      text:'',
      dqmd:null,
      language:this.$t('loding.lass'),
    }
  },
  created() {
    this.getStoreList();
    Bus.$on('l18zh', (res) => {
      this.language = res;
    });
  },
  watch: {
    language(newVal) {
      // 语言变化时执行逻辑
      this.listshSalesPromotion();
    }
  },
  methods:{
    xuanzhemd(id){
      this.dqmd = id;
      this.listshSalesPromotion()
    },
    getStoreList() {
      storelistlist().then(res => {
        if (res.data && res.data.records && res.data.records.length > 0) {
          this.storeList = res.data.records;
          this.selectedStoreId = res.data.records[0].id;
          this.dqmd=res.data.records[0].id;
          this.listshSalesPromotion()
        }
      });
    },
    delechansu(e){
      this.$confirm(this.$t('cuxiao.delSm'), this.$t('mendian.prompt'), {
        confirmButtonText: this.$t('mendian.determine'),
        cancelButtonText: this.$t('mendian.cancellation'),
        type: 'warning'
      }).then(() => {
        delshSalesPromotion(e.id).then(res=>{
          // console.log('删除',res);
          if(res.code==200){
            this.listshSalesPromotion();
            this.$message({
              type: 'success',
              message: this.$t('mendian.successful')
            });
          }else{
            this.$message({
              type: 'info',
              message: this.$t('mendian.Deletefailed')
            });
          }

        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: this.$t('mendian.undelete')
        });
      });

    },
    tijiaobaocun(){
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateshSalesPromotion(this.form).then(res=>{
              // console.log('操作成功',res)
              if(res.code==200){
                this.listshSalesPromotion();
                this.open = false;
                this.reset();
              }
            })
          }else{
            this.form.language = this.language=='zh'?'2':this.language=='tw'?'3':this.language=='en'?'1':'0';
            addshSalesPromotion(this.form).then(res=>{
              // console.log('操作成功',res)
              if(res.code==200){
                this.listshSalesPromotion();
                this.open = false;
                this.reset();
              }
            })
          }

        }
      });

    },

    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id
      getshSalesPromotion(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.text = this.$t('cuxiao.modify');
      });
    },


    reset() {
      this.form = {
        id: null,
        salesName: null,
        salesType: null,
        salesReduction: null,
        salesCondition: null,
        salesFund: null,
        endTime: null,
        poster: null,
        salesState: null,
        illustrate: null,
        shId:null,
        edit:true
      };
    },
    handleAdd(){
      this.reset();
      this.text = this.$t('cuxiao.AddCX');
      this.open = true;
      this.form.shId=this.dqmd
    },
    cancel() {
      this.open = false;
      this.reset();
    },
    listshSalesPromotion(){
      var that = this;
      that.loding = true;
      this.queryParams.shId=this.dqmd
      const language =this.language=='zh'?'2':this.language=='tw'?'3':this.language=='en'?'1':'0';
      this.queryParams.language=language
      listshSalesPromotion(this.queryParams).then(response => {
        that.loding = false;
        this.total = response.data.total;
        this.tableData = response.data.records;

      });
    },

    //翻页
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.queryParams.size = val;
      this.listshSalesPromotion();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.queryParams.page = val;
      this.getpinguilist();
    },
    handleAvatarlogo(res, file) {
      // this.upimg = URL.createObjectURL(file.raw);
      this.form.poster = file.response.data;
      // console.log('上传图片',file.response);

    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error(this.$t('cuxiao.ItcanonlyJPG'));
      }
      if (!isLt2M) {
        this.$message.error(this.$t('cuxiao.Cannotexceed'));
      }
      return isJPG && isLt2M;
    }
  }
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  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: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>
