<style>
.height_auto.el-select .el-input{
  height: auto
}
.BuyingList .el-button-group .el-button{
  padding: 6px !important;
}
.BuyingList .el-button-group .el-button.iconfont{
  font-size: 12px !important;
}
</style>

<template>
  <div class="flexOne BuyingList">
    <div class="query-box">
      <ul class="user_time_picker">
        <li>
          <span>
            <em>{{$t('MarketingActi.commName')}}</em>
            <el-input v-model="msg.name" @keyup.enter.native="getList"></el-input>
          </span>
        </li>
        <li>
          <input type="button" @click="getList" class="hollowFixedBtn" :value="$t('pub.searchBtn')">
          <input type="button" @click="outerVisible = true" class="normalBtn" :value="$t('pub.addBtn')">
        </li>
      </ul>
    </div>

    <div class="clearfix"></div>
    <table class="singeRowTable" border="0" cellspacing="0" cellpadding="0" v-loading="loading">
      <tr>
        <th>{{$t('MarketingActi.commName')}}</th>
        <th>{{$t('ground.cbenjia')}}</th>
        <th>{{$t('ground.xiaoshoujia')}}</th>
        <th>{{$t('system.table_begTime')}}</th>
        <th>{{$t('MarketingActi.endTime')}}</th>
        <th>{{$t('system.label_info')}}</th>
        <th>{{$t('admin.admin_czPerson')}}</th>
        <th>{{$t('hotel.table_operattime')}}</th>
        <th>{{$t('system.table_operation')}}</th>
      </tr>
      <tr v-for="item in dataList">
         <td>{{item.CommodityName}}</td>
         <td>{{item.CostPrice}}</td>
         <td>{{item.SellPrice}}</td>
         <td>{{item.StartTime}}</td>
         <td>{{item.EndTime}}</td>
         <td>{{item.Description}}</td>
         <td>{{item.UpdateBy}}</td>
         <td>{{item.UpdateDate}}</td>
         <td  class="BuyingList">
          <el-button-group size="mini">
            <el-tooltip class="item" effect="dark" :content="$t('pub.updateMsg')" placement="top">
              <el-button type="primary" size="mini" class="iconfont icon-xiugai" @click="editPrice(item)"></el-button>
            </el-tooltip>
          </el-button-group>
         </td>
      </tr>
    </table>
    <el-dialog
      custom-class="w400"
      :title="$t('ground.xinzengjg')"
      :visible.sync="outerVisible"
      center
      :before-close="closeChangeMachie"
    >
      <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="140px">
        <el-form-item :label="$t('ground.chengbenjg')" prop="CostPrice">
          <el-input v-model="addMsg.CostPrice" class="w217"/>
        </el-form-item>
        <el-form-item :label="$t('Airticket.Air_salesPrice')" prop="SellPrice">
          <el-input v-model="addMsg.SellPrice" class="w217"/>
        </el-form-item>
        <el-form-item :label="$t('ground.jiageyouxkssh')" prop="StartDate">
          <el-date-picker
            v-model="addMsg.StartDate"
            type="date"
            value-format="yyyy-MM-dd"
            @change="regDate()"
            :picker-options="pickerOptions"
            :placeholder="$t('admin.admin_choDate')">
          </el-date-picker>
        </el-form-item>
        <el-form-item :label="$t('ground.jiageyouxjssj')" prop="EndDate">
          <el-date-picker
            v-model="addMsg.EndDate"
            type="date"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd"
            @change="regDate(1)"
            :placeholder="$t('admin.admin_choDate')">
          </el-date-picker>
        </el-form-item>
        <el-form-item :label="$t('system.label_info')" prop="Description">
          <el-input v-model="addMsg.Description" class="w217"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <button
          class="hollowFixedBtn"
          @click="outerVisible = false, resetForm('addMsg')"
        >{{$t('pub.cancelBtn')}}</button> &nbsp;
        <button class="normalBtn" @click="submitForm('addMsg')">{{$t('pub.saveBtn')}}</button>
      </div>
    </el-dialog>
    <el-pagination background @current-change="handleCurrentChange" layout="total,prev, pager, next, jumper" :page-size=msg.pageSize :total=total>
		</el-pagination>
    <div class="noDataNotice" v-if="dataList.length<1">
      <i class="iconfont icon-kong"></i>
      <p>{{$t("active.ld_noData")}}</p>
    </div>
</div>
</template>
<script>
export default {
  data() {
    return {
      //请求
      msg: {
        pageSize: 15,
        pageIndex: 1,
        CommodityId: 0,
        CommodityName: '',
        StartDate: ''
      },
      addMsg: {
        CommodityId: '',
        Description: '',
        CostPrice: '',
        SellPrice: '',
        StartDate: '',
        EndDate: '',
        Id: 0,
      },
      rules: {
        Description: [
          { required: true, message: this.$t('ground.qingsrmsxx'), trigger: "blur" }
        ],
        CostPrice: [
          { required: true, message: this.$t('ground.qingsrcbjg'), trigger: "blur" }
        ],
        SellPrice: [
          { required: true, message: this.$t('ground.qingsrxsjg'), trigger: "blur" }
        ],
        StartDate: [
          { required: true, message: this.$t('ground.qingxuanzekssjs'), trigger: "blur" }
        ],
        EndDate: [
          { required: true, message: this.$t('ground.qingxuanzejssjs'), trigger: "blur" }
        ]
      },
      loading:false,
      dataList:[],
      total:0,
      outerVisible: false,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7
        }
      }
    };
  },
  
  mounted() {
    this.msg.CommodityId = this.addMsg.CommodityId = this.$route.query.proId
    this.getList();
  },
  filters: {
  },

  methods: {
    regDate(t){
      if (t) {
        if (this.addMsg.StartDate == '') return
        if (this.addMsg.StartDate > this.addMsg.EndDate) {
          this.addMsg.EndDate = ''
          this.$message.error(this.$t('ground.jieshusjbxdyks'))
        }
        return
      }
      if (this.addMsg.EndDate == '') return
      if (this.addMsg.StartDate > this.addMsg.EndDate) {
        this.addMsg.StartDate = ''
        this.$message.error(this.$t('ground.kaishisjbxxyjs'))
      }
    },
    handleCurrentChange(val){
      this.msg.pageIndex=val;
      this.getList();
    },
    editPrice(item){
      this.addMsg.Description = item.Description;
      this.addMsg.CostPrice = item.CostPrice;
      this.addMsg.SellPrice = item.SellPrice;
      this.addMsg.StartDate = item.StartTime;
      this.addMsg.EndDate = item.EndTime;
      this.addMsg.Id = item.Id
      this.outerVisible = true;
    },
    closeChangeMachie(done) {
      //弹出框关闭初始化弹框内表单
      done();
      this.resetForm("addMsg");
    },
    //重置信息
    resetInfo() {
      var newMsg = {
        CommodityId: this.$route.query.proId,
        Description: '',
        CostPrice: '',
        SellPrice: '',
        StartDate: '',
        EndDate: '',
        Id: 0
      };
      this.addMsg = newMsg;
    },
    addAward(){
      this.apipost("Shop_post_SetCommodityPriceInfo", this.addMsg, res => {
        if (res.data.resultCode === 1) {
          this.getList()
          this.resetInfo()
          this.outerVisible = false;
        } else {
          this.Error(res.data.message)
        }
      }, null);
    },
    //提交
    submitForm(addMsg) {
      //提交创建、修改表单
      this.$refs[addMsg].validate(valid => {
        if (valid) {
          this.addAward();
        } else {
          return false;
        }
      });
    },
    //获取数据
    getList() {
      this.loading = true;
      this.apipost("Shop_post_GetCommodityPricePageList", this.msg, res => {
        this.loading = false;
        if (res.data.resultCode === 1) {
          this.dataList = res.data.data.pageData;
          this.total= res.data.data.count;
        } else {
          this.Error(res.data.message)
        }
      }, null);
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.resetInfo()
    }
   }
};
</script>