<template>
  <el-dialog
    :title="!dataForm.thirdSettleId ? '新增结算账单' : '编辑结算账单'"
    :close-on-click-modal="false"
    :visible.sync="visible"
    v-if="visible"
    width="760px"
    @close="dialogClose">
    <el-form
      :model="dataForm"
      label-width="100px"
      size="small"
      ref="dataForm">
      <el-form-item label="打印渠道">
        <el-select v-model="dataForm.printChannel" placeholder="请选择打印渠道" :disabled="dataForm.thirdSettleId != null">
          <el-option key="Lightning" label="闪电" value="Lightning"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="settleName" label="结算名称" prop="settleName" style="width: 400px">
        <el-input v-model="dataForm.settleName" maxlength="50" show-word-limit></el-input>
      </el-form-item>
      <el-form-item label="结算时段">
        <el-date-picker style="width: 400px"
          v-model="dateRange"
          value-format="yyyy-MM-dd HH:mm:ss"
          format="yyyy-MM-dd HH:mm:ss"
          type="datetimerange"
          start-placeholder="结算开始时间"
          end-placeholder="结算结束时间"
          :default-time="['00:00:00', '23:59:59']">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结算状态">
        <el-select v-model="dataForm.status" placeholder="请选择结算状态">
          <el-option label="待结算" :value="0"></el-option>
          <el-option label="已结算" :value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="结算凭证" prop="pic">
        <img-upload v-model="dataForm.pic"></img-upload>
        <div v-if="dataForm.pic" @click="dataForm.pic = ''" class="default-btn">删除</div>
      </el-form-item>
      <el-form-item label="备注" prop="remark" style="width: 400px">
        <el-input type="textarea" v-model="dataForm.remark"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <div class="default-btn"  @click="dialogClose">{{$t('crud.filter.cancelBtn')}}</div>
      <div class="default-btn primary-btn" @click="dataFormSubmit()">{{$t('crud.filter.submitBtn')}}</div>
    </span>
  </el-dialog>
</template>

<script>
  import ImgUpload from '@/components/img-upload'

  export default {
    data () {
      return {
        visible: false,
        dataForm: {
          thirdSettleId: null,
          settleName: null,
          startTime: null,
          endTime: null,
          deliveryCode: null,
          pic: null,
          remark: null,
          printChannel: null,
          status: 0
        },
        resourcesUrl: process.env.VUE_APP_RESOURCES_URL,
        dateRange:[],
        isSubmit: false,
      }
    },
    components: {
      ImgUpload
    },
    methods: {
      init (thirdSettleId) {
        this.visible = true;
        this.dataForm.thirdSettleId = thirdSettleId;
        this.$nextTick(() => {
          if(thirdSettleId){
            this.getDataInfo();
          }
        });
      },
      dialogClose(){
        this.visible = false;
        this.dataForm = {settleName: null, startTime: null, endTime: null, status: 0, pic: null, remark:null, printChannel:null};
        this.dateRange = [];
        this.$emit('refreshDataList');
      },
      // 获取店铺详情数据
      getDataInfo () {
        this.$http({
          url: this.$http.adornUrl('/printSettlement/thirdPrintSettlement/info/' + this.dataForm.thirdSettleId),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({data}) => {
          this.dataForm = data;
          this.$set(this.dateRange, 0, this.dataForm.startTime);
          this.$set(this.dateRange, 1, this.dataForm.endTime);
        })
      },
      // 重置表单
      resetForm () {
        this.$refs.dataForm.resetFields()
      },
      // 表单提交
      dataFormSubmit () {
        this.dataForm.startTime = this.dateRange === null ? null : this.dateRange[0];
        this.dataForm.endTime = this.dateRange === null ? null : this.dateRange[1];
        let url = '/printSettlement/thirdPrintSettlement/generateSettlement';
        if(this.dataForm.thirdSettleId){
          url = '/printSettlement/thirdPrintSettlement/update'
        }
        this.$http({
          url: this.$http.adornUrl(url),
          method: 'POST',
          data: this.$http.adornData(this.dataForm)
        }).then(({data}) => {
          if(data){
            this.$message({
              message: '提交成功',
              type: 'success',
            })
            this.dialogClose();
          }else{
            this.$message({
              message: '提交失败',
              type: 'success',
            })
          }
        }).catch((e) => {

        })
      },
    }
  }
</script>
<style lang="scss" scoped>
  .map {
    width: 100%;
    height: 500px;
  }
  .el-date-editor.el-input, .el-date-editor.el-input__inner {
    width: 240px;
  }
  .area-select {
    display: flex;
    .el-select.el-select--smalll {
      width: 172px;
    }
  }
</style>
<style scoped>
  .settleName >>> .el-input__inner {
    padding-right: 45px !important;
  }
  .addr >>> .el-input__inner {
    padding-right: 55px;
  }
</style>
