<template>
  <div style="width: 100%">
    <a-button type="primary" style="margin-bottom: 10px" @click="addContractAgree" v-if="!disabled">新增行</a-button>
    <a-table :columns="columns" :data-source="dataListContractAgree" :pagination="false" :scroll="{x: 1300}">
      <template #headerCell="{ column }">
        <template v-if="column.dataIndex == 'dateFrom'">
          <span><span class="redStyle">*</span>开始日期</span>
        </template>
        <template v-if="column.dataIndex == 'dateTo'">
          <span><span class="redStyle">*</span>结束日期</span>
        </template>
        <template v-if="column.dataIndex == 'baseInc'">
          <span><span class="redStyle">*</span>基础量/增量</span>
        </template>
        <template v-if="column.dataIndex == 'sort'">
          <span><span class="redStyle">*</span>优先级</span>
        </template>
        <template v-if="column.dataIndex == 'qtyGjMonth'">
          <span><span class="redStyle">*</span>月气量(吉焦)</span>
        </template>
        <template v-if="column.dataIndex == 'qtyM3Month'">
          <span><span class="redStyle">*</span>月气量(万方)</span>
        </template>
      </template>
      <template #bodyCell="{ column, record, index }">
        <template v-if="column.dataIndex === 'dateFrom'">
          <a-date-picker v-model:value="record.dateFrom" :disabled="disabled" @change="dateFromTb(record.dateFrom, index, record)"  style="width: 100%" />
        </template>
        <template v-if="column.dataIndex === 'dateTo'">
          <a-date-picker v-model:value="record.dateTo" :disabled="disabled" @change="dateToTb(record.dateTo, index, record)" style="width: 100%" />
        </template>
        <template v-if="column.dataIndex === 'sort'">
          <a-input-number v-model:value="record.sort" :disabled="disabled" :min="0" style="width: 100%" />
        </template>
        <template v-if="column.dataIndex === 'baseInc'">
          <a-select v-model:value="record.baseInc" :disabled="disabled" style="width: 100%" allow-clear>
            <a-select-option v-for="item in optionSelect.baseIncList" :key="item.code" :value="item.code">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </template>
        <template v-if="column.dataIndex === 'rateM3Gj'">
          <a-input-number v-model:value="record.rateM3Gj" :disabled="disabled" :min="0" @change="numChange('rateM3Gj', record, index)" style="width: 100%" />
        </template>
        <template v-if="column.dataIndex === 'qtyGjMonth'">
          <a-input-number v-model:value="record.qtyGjMonth" :disabled="disabled" :min="0" @change="numChange('qtyGjMonth', record, index)" style="width: 100%" />
        </template>
        <template v-if="column.dataIndex === 'qtyM3Month'">
          <a-input-number v-model:value="record.qtyM3Month" :disabled="disabled" :min="0" @change="numChange('qtyM3Month', record, index)" style="width: 100%" />
        </template>
        <template v-if="column.dataIndex === 'zfbyTypeCode'">
          <a-select v-model:value="record.zfbyTypeCode" :disabled="disabled" style="width: 100%" allow-clear>
            <a-select-option v-for="item in optionSelect.zfbyTypeCodeList" :key="item.code" :value="item.code">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </template>
        <template v-if="column.dataIndex === 'zfbyValue'">
          <a-input-number v-model:value="record.zfbyValue" :disabled="disabled" :min="0" style="width: 100%" />
        </template>
        <template v-if="column.dataIndex === 'note'">
          <a-input v-model:value="record.note" :disabled="disabled" style="width: 100%" />
        </template>
        <template v-if="column.dataIndex === 'operation'">
          <a v-if="!disabled" style="margin-right: 10px" @click="btnCheck(record, index)">删除</a>
        </template>
      </template>
    </a-table>
  </div>
</template>
<script lang="ts" setup>
  import { Card } from 'ant-design-vue';
  import { ref, watch} from 'vue';
  import { useRouter } from 'vue-router';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { Modal } from 'ant-design-vue';
  import { useModal } from '/@/components/Modal';
  import { message } from 'ant-design-vue';
  import dayjs from 'dayjs';

  const router = useRouter();
  const { t } = useI18n();
  const dataListContractAgree = ref([])
  const columns= ref([
    { title: t('序号'), dataIndex: 'index', key: 'index', sorter: true, customRender: (column) => `${column.index + 1}` ,width: 80},
    { title: t('开始日期'), dataIndex: 'dateFrom', sorter: true, width:160},
    { title: t('结束日期'), dataIndex: 'dateTo', sorter: true, width: 160},
    { title: t('基础量/增量'), dataIndex: 'baseInc', sorter: true, width: 130},
    { title: t('优先级'), dataIndex: 'sort', sorter: true, width: 100},
    { title: t('比值(方/吉焦)'), dataIndex: 'rateM3Gj', sorter: true, width: 150},
    { title: t('月气量(吉焦)'), dataIndex: 'qtyGjMonth', sorter: true, width: 150},
    { title: t('月气量(万方)'), dataIndex: 'qtyM3Month', sorter: true, width: 150},
    { title: t('日气量(吉焦)'), dataIndex: 'qtyGjDay', sorter: true, width: 120},
    { title: t('日气量(万方)'), dataIndex: 'qtyM3Day', sorter: true, width: 120},
    { title: t('照付不议类型'), dataIndex: 'zfbyTypeCode', sorter: true, width: 120},
    { title: t('照付不议比例%/量数值'), dataIndex: 'zfbyValue', sorter: true, width: 120},
    { title: t('备注'), dataIndex: 'note', sorter: true, width: 200},
    { title: t('操作'), dataIndex: 'operation', width: 80, fixed: 'right',align: 'center'},
  ]);
  const [register, { openModal:openModal}] = useModal();
  const props = defineProps({
    disabled: Boolean,
    list: Array,
    optionSelect: Object
  });
  const emit = defineEmits(['change']);

    const addContractAgree = () => {
      dataListContractAgree.value.push({
        dateFrom: null, dateTo: null, rateM3Gj: null, qtyGjMonth: null, qtyM3Month: null, qtyGjDay: null, qtyM3Day: null
      })
    }
    const dateFromTb = (startValue, index, record) => {
      if (!startValue) return
      const endValue = dataListContractAgree.value[index]?.dateTo;
      if (!startValue || !endValue) {
        return false
      }
      if (startValue.valueOf() > endValue.valueOf()) {
        message.warning('结束日期须大于等于开始日期')
        dataListContractAgree.value[index].dateFrom = ''
        return
      }
      dayCount(record)
    }

    const dateToTb = (endValue, index, record) => {
      if (!endValue) return
      const startValue = dataListContractAgree.value[index]?.dateFrom;
      if (!endValue || !startValue) {
        return false
      }
      if (startValue.valueOf() > endValue.valueOf()) {
        message.warning('结束日期须大于等于开始日期')
        dataListContractAgree.value.splice(index, 1, { ...dataListContractAgree.value[index], dateTo: '' });
        return
      }
      dayCount(record)
    }
    const numChange = (key, record) => {
      if (key == 'qtyGjMonth') {
        numCount2(record)
        dayCount(record)
      }
      if (key == 'qtyM3Month') {
        numCount1(record)
        dayCount(record)
      }
      if (key == 'rateM3Gj') {
        numCount1(record)
        numCount2(record)
        dayCount(record)
      }
    }
    const numCount1 = (record) => {
      // 月气量(吉焦) =月气量(方)qty_m3_month*rate_m3_gj (比值(方/吉焦)
      record.qtyGjMonth = (Number(record.qtyM3Month) || 0) * (Number(record.rateM3Gj) || 0)
      record.qtyGjMonth = record.qtyGjMonth ? record.qtyGjMonth.toFixed(4) : '0'
    }
    const numCount2 = (record) => {
      // 月气量(方) =  月气量(吉焦) qty_gj_month/rate_m3_gj/10000   显示时字段值/10000；保存时页面值*10000
      record.qtyM3Month = Number(record.rateM3Gj) ?  (Number(record.qtyGjMonth) || 0) /Number(record.rateM3Gj) : 0
      record.qtyM3Month = record.qtyM3Month ? record.qtyM3Month.toFixed(4) : '0'
    }
    const dayCount = (record) => {
      // 日气量(吉焦) = 月气量(吉焦)qty_gj_month/开始日期到结束日期的天数；计算结果保留整数
      const days = dayjs(record.dateTo).diff(dayjs(record.dateFrom), 'day');
      record.qtyGjDay = days ? (Number(record.qtyGjMonth) || 0) /days : 0
      record.qtyGjDay = parseInt(record.qtyGjDay)
      // 日气量(方) = 月气量(万方)/开始日期到结束日期的天数；计算结果保留4位小数；显示时字段值/10000；保存时页面值*10000
      record.qtyM3Day = days ? (Number(record.qtyM3Month) || 0) /days : 0
      record.qtyM3Day = record.qtyM3Day ? record.qtyM3Day.toFixed(4) : '0'
    }
  const btnCheck = (record, index) => {
    dataListContractAgree.value.splice(index, 1)
  }
  const getQtyList = () => {
    return dataListContractAgree.value
  }
  watch(
      () => props.disabled,
      (val) => {
        if (val) {
          let idx2 = columns.value.findIndex(v =>v.dataIndex == 'operation')
          idx2>-1 && columns.value.splice(idx2, 1)
        }
      },
      {
        immediate: true,
        deep: true,
      }
    );
  watch(
    () => props.list,
    async (val) => {
      dataListContractAgree.value = val || []
    },
    {
      immediate: true,
      deep: true,
    }
  );
  defineExpose({
    getQtyList,
  });
</script>
<style lang="less" scoped>
  .redStyle {
    color: red;
  }
</style>
