<template>
  <view>
    <u-popup :show="show" mode="bottom" @open="open" @close="close" :customStyle="{width:'100vw',borderRadius:'30rpx'}"
      round="15" safeAreaInsetBottom closeable>
      <u-form labelPosition="left" errorType="toast" :model="model" :rules="rules" ref="uForm">
        <view class="popCss">
          <view class="padding-lr">
            <view class="padding-top text-lg text-left">
              {{title}}
            </view>
            <!-- 点火维护 -->
            <u-form-item v-if="type==='dhwh'" required label="是否已点火" labelWidth="100">
              <view class="flex justify-between margin-tb w100">
                <u-radio-group activeColor="#CF000D" placement="row" v-model="radiovalueDHWH" @change="DHchange">
                  <u-radio class="margin-right" name="是">是</u-radio>
                  <u-radio name="否">否</u-radio>
                </u-radio-group>
              </view>
            </u-form-item>
            <!-- 工程维护 -->
            <u-form-item v-if="type==='gcwh'" required label="是否竣工" labelWidth="100">
              <view class="flex justify-between margin-tb w100">
                <u-radio-group activeColor="#CF000D" placement="row" v-model="radiovalueGCWH" @change="GCchange">
                  <u-radio class="margin-right" name="是">是</u-radio>
                  <u-radio name="否">否</u-radio>
                </u-radio-group>
              </view>
            </u-form-item>

            <!-- 运营维护 -->
            <u-form-item v-if="type==='yywh'" required label="是否通气到表前" labelWidth="100">
              <view class="flex justify-between margin-tb w100">
                <u-radio-group activeColor="#CF000D" placement="row" v-model="radiovalueYYWH" @change="YYchange">
                  <u-radio class="margin-right" name="是">是</u-radio>
                  <u-radio name="否">否</u-radio>
                </u-radio-group>
              </view>
            </u-form-item>
            <view class="usuallyCard padding margin-bottom-sm">
              <view class="margin-tb text-lg">
                基本维护
              </view>
              <!-- 点火维护 -->
              <u-form-item v-if="type==='dhwh'" required label="用户编号" labelWidth="100" borderBottom>
                <u-input v-model="model.userCode" placeholder="请输入" border="none"></u-input>
                <!-- <u-icon slot="right" name="calendar" size="20" @click="datetimeShow = true"></u-icon> -->
              </u-form-item>
              <u-form-item v-if="type==='dhwh' && dhShow" required label="点火时间" labelWidth="100" borderBottom>
                <u-input v-model="model.ignTime" placeholder="请选择" disabled disabledColor="#fff"
                  border="none"></u-input>
                <u-icon slot="right" name="calendar" size="20" @click="datetimeShow = true"></u-icon>
              </u-form-item>
              <u-form-item v-if="type==='dhwh' && !dhShow" required label="未点火原因" labelWidth="100" borderBottom>
                <u-input v-model="model.nIgnRsn" placeholder="请选择" disabled disabledColor="#fff"
                  border="none"></u-input>
                <u-icon slot="right" name="arrow-down" size="20"
                  @click="handleIgnition('sys_mc_ignition_rsn')"></u-icon>
              </u-form-item>

              <!-- 工程维护 -->
              <u-form-item v-if="type==='gcwh' && gcShow" required label="市场派单时间" labelWidth="100" borderBottom>
                <u-input v-model="model.assignmentTime" placeholder="请选择" disabled disabledColor="#fff"
                  border="none"></u-input>
                <u-icon slot="right" name="calendar" size="20" @click="multipleChange('assignmentTime')"></u-icon>
              </u-form-item>
              <u-form-item v-if="type==='gcwh' && gcShow" required label="竣工时间" labelWidth="100" borderBottom>
                <u-input v-model="model.completionTime" placeholder="请选择" disabled disabledColor="#fff"
                  border="none"></u-input>
                <u-icon slot="right" name="calendar" size="20" @click="multipleChange('completionTime')"></u-icon>
              </u-form-item>
              <u-form-item v-if="type==='gcwh' && !gcShow" required label="未竣工原因" labelWidth="100" borderBottom>
                <u-input v-model="model.nonNcmpRsn" placeholder="请选择" disabled disabledColor="#fff"
                  border="none"></u-input>
                <u-icon slot="right" name="arrow-down" size="20"
                  @click="handleIgnition('sys_mc_construction_kb_rsn')"></u-icon>
              </u-form-item>

              <!-- 运营维护 -->
              <u-form-item v-if="type==='yywh' && yyShow" required label="市场派单时间" labelWidth="100" borderBottom>
                <u-input v-model="model.assignmentTime" placeholder="请选择" disabled disabledColor="#fff"
                  border="none"></u-input>
                <u-icon slot="right" name="calendar" size="20" @click="multipleChange('assignmentTime')"></u-icon>
              </u-form-item>
              <u-form-item v-if="type==='yywh' && yyShow" required label="通气到到表前时间" labelWidth="100" borderBottom>
                <u-input v-model="model.gctMtrrisTime" placeholder="请选择" disabled disabledColor="#fff"
                  border="none"></u-input>
                <u-icon slot="right" name="calendar" size="20" @click="multipleChange('gctMtrrisTime')"></u-icon>
              </u-form-item>
              <u-form-item v-if="type==='yywh' && !yyShow" required label="未完成原因" labelWidth="100" borderBottom>
                <u-input v-model="model.gctNcmpRsn" placeholder="请选择" disabled disabledColor="#fff"
                  border="none"></u-input>
                <u-icon slot="right" name="arrow-down" size="20"
                  @click="handleIgnition('sys_mc_construction_yy_rsn')"></u-icon>
              </u-form-item>
            </view>
          </view>
          <view class="flex justify-between bg-white padding-tb-xs padding-lr">
            <view class="w48" @click="close">
              <u-button :customStyle="{color:'#CF000D'}">取消</u-button>
            </view>
            <view class="w48" @click="confirm">
              <u-button color="#CF000D">确定</u-button>
            </view>
          </view>
        </view>
      </u-form>
    </u-popup>
    <u-picker :show="pickerShow" :columns="columns" keyName="label" @close="pickerShow = false" closeOnClickOverlay
      @cancel="pickerShow = false" @confirm="pickerConfirm"></u-picker>
    <!-- <u-calendar :show="calendarShow" @close="closeCalender" @confirm="confirmCalender"></u-calendar> -->
    <u-datetime-picker :show="datetimeShow" v-model="dataTimeValue" closeOnClickOverlay @confirm="dateConfirm"
      @cancel="datetimeShow = false" @close="datetimeShow = false" mode="date"></u-datetime-picker>
  </view>
</template>

<script>
  import {
    mcIgnitionMaintenance,
    mcConstructionEngineering,
    mcConstructionOperation
  } from "@/api/charge.js"
  export default {
    name: "popUpComponent",
    props: {
      title: {
        type: String,
        default: ""
      },
      type: {
        type: String,
        default: ""
      },
      IgnitionID: {
        type: Number
      },
      userCode: {
        type: String,
        default: ""
      },
    },
    data() {
      return {
        show: false,
        calendarShow: false,
        datetimeShow: false,
        dataTimeValue: Number(new Date()),
        radiovalueDHWH: "",
        radiovalueGCWH: "",
        radiovalueYYWH: "",
        model: {

          // ignTime: "",
          // nIgnRsn: ""
        },
        rules: {},
        pickerShow: false,
        columns: [],
        dhShow: true,
        gcShow: true,
        yyShow: true,
        currentName: "",
      };
    },
    methods: {
      open() {
        this.model.userCode = this.userCode;
        this.show = true;
      },
      close() {
        console.log("close")
        this.show = false;
        this.model = {};
      },
      handleIgnition(dict) {
        let dictArr = this.getDictDatas(dict);
        this.columns = [dictArr];
        console.log("未点火原因", this.columns);
        this.pickerShow = true;
      },
      async confirm() {
        console.log(this.radiovalueDHWH);
        if (this.type === 'dhwh') {
          if (!this.radiovalueDHWH) {
            uni.$u.toast('请选择是否点火');
            return
          }
          if (!this.model.ignTime && this.radiovalueDHWH === '是') {
            uni.$u.toast('请选择点火时间');
            return
          }
          if (!this.model.nIgnRsn && this.radiovalueDHWH === '否') {
            uni.$u.toast('请选择未点火原因');
            return
          }
          this.submitDh()
        }
        if (this.type === 'gcwh') {
          if (!this.radiovalueGCWH) {
            uni.$u.toast('请选择是否竣工');
            return
          }
          if (!this.model.assignmentTime && this.radiovalueGCWH === '是') {
            uni.$u.toast('选择市场派单时间');
            return
          }
          if (!this.model.completionTime && this.radiovalueGCWH === '是') {
            uni.$u.toast('请选择市场竣工时间');
            return
          }
          if (!this.model.nonNcmpRsn && this.radiovalueGCWH === '否') {
            uni.$u.toast('请选择竣工原因');
            return
          }
          this.submitGc()
        }

        if (this.type === 'yywh') {
          if (!this.radiovalueYYWH) {
            uni.$u.toast('请选择是否通气到列表前');
            return
          }
          if (!this.model.assignmentTime && this.radiovalueYYWH === '是') {
            uni.$u.toast('选择市场派单时间');
            return
          }
          if (!this.model.gctMtrrisTime && this.radiovalueGCWH === '是') {
            uni.$u.toast('请选择通气到表前时间');
            return
          }
          if (!this.model.gctNcmpRsn && this.radiovalueGCWH === '否') {
            uni.$u.toast('请选择未完成原因');
            return
          }
          this.submitYy()
        }
        this.show = false;
      },
      async submitDh() {
        let data = {
          id: this.IgnitionID,
          ignCnfStatusCode: this.radiovalueDHWH === '是' ? 'Y' : 'N',
          nIgnRsn: this.model.nIgnRsn,
          ignTime: this.model.ignTime + ' 00:00:00'
        }
        console.log(this.radiovalueGCWH);
        console.log("点火数据", data);
        const result = await mcIgnitionMaintenance(data);
        if (result.code === 200) {
          uni.$u.toast('提交成功');
          this.$emit('getList');
          this.model = {}
        } else {
          uni.$u.toast(result.msg)
        }
      },
      async submitGc() {
        let data = {
          id: this.IgnitionID,
          isCompleted: this.radiovalueGCWH === '是' ? 'Y' : 'N',
          assignmentTime: this.model.assignmentTime + ' 00:00:00',
          completionTime: this.model.completionTime + ' 00:00:00',
          nonNcmpRsn: this.model.nonNcmpRsn
        }
        console.log(this.radiovalueGCWH);
        console.log("工程数据", data);
        const result = await mcConstructionEngineering(data);
        if (result.code === 200) {
          uni.$u.toast('提交成功');
          this.$emit('getList');
          this.model = {}
        } else {
          uni.$u.toast(result.msg)
        }
      },
      async submitYy() {
        let data = {
          id: this.IgnitionID,
          gasConnMtrRis: this.radiovalueYYWH === '是' ? 'Y' : 'N',
          assignmentTime: this.model.assignmentTime + ' 00:00:00',
          gctMtrrisTime: this.model.gctMtrrisTime + ' 00:00:00',
          gctNcmpRsn: this.model.gctNcmpRsn
        }
        console.log("运营数据", data);
        const result = await mcConstructionOperation(data);
        if (result.code === 200) {
          uni.$u.toast('提交成功');
          this.$emit('getList');
          this.model = {}
        } else {
          uni.$u.toast(result.msg)
        }
      },
      DHchange(e) {
        console.log(e);
        if (e === '是') {
          this.dhShow = true
        } else {
          this.dhShow = false;
          this.model = {}
        }
      },
      GCchange(e) {
        if (e === '是') {
          this.gcShow = true
        } else {
          this.gcShow = false;
          this.model = {}
        }
      },
      YYchange(e) {
        if (e === '是') {
          this.yyShow = true
        } else {
          this.yyShow = false;
          this.model = {}
        }
      },
      multipleChange(name) {
        this.currentName = name;
        this.datetimeShow = true;
      },
      pickerConfirm(e) {
        console.log(e);
        let data = e.value[0].value;
        if (this.type === 'dhwh') {
          this.model.nIgnRsn = data;
        }
        if (this.type === 'gcwh') {
          this.model.nonNcmpRsn = data;
        }
        if (this.type === 'yywh') {
          this.model.gctNcmpRsn = data;
        }
        this.pickerShow = false;
      },
      confirmCalender(e) {
        console.log(e);
        this.model.ignTime = e[0];
        this.calendarShow = false;
      },
      dateConfirm(e) {
        let time = this.$u.timeFormat(e.value, 'yyyy-mm-dd');
        if (this.type === 'dhwh') {
          this.model.ignTime = time;
        }
        if (this.type === 'gcwh') {
          this.model[this.currentName] = time;
          // this.model.nonNcmpRsn = data;
        }
        if (this.type === 'yywh') {
          this.model[this.currentName] = time;
          // this.model.gctNcmpRsn = data;
        }
        this.datetimeShow = false;
      },
      closeCalender() {
        this.calendarShow = false;
      },
    }
  }
</script>

<style lang="scss">
  .popCss {
    background: #F6F6F6;
    border-radius: 30rpx;
    // text-align: center;
  }

  .usuallyCard {
    border-radius: 15rpx;
  }

  /deep/.u-form-item__body {
    padding: 10px;
  }
</style>