<template>
  <a-form
    :model="form"
    :label-col="{sm: { span: 8 } }"
    :wrapper-col="{ span:24}"
    ref="formRef"
  >
    <a-row :gutter="8">
      <a-col :xs="12">
        <a-form-item
          required
          name="isOperate"
          :rules="[{ required: true, message: '请选择是否运营' }]"
        >
          <template #label>
            是否运营
            <a-tooltip title="是否开通运营，是为正常运营，否为停运">
              <QuestionCircleOutlined style="margin-left: 5px;color: rgb(192,192,192);" />
            </a-tooltip>
          </template>
          <a-radio-group
            v-model:value="form.isOperate"
            name="radioGroup"
            @change="changeIsOperate"
          >
            <a-radio value="1">运营中</a-radio>
            <a-radio value="2">停止运营</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="8">
      <a-col :xs="12">
        <a-form-item
          label="运营类型"
          required
          name="operateType"
          :rules="[{ required: true, message: '请选择运营类型' }]"
        >
          <a-radio-group
            v-model:value="form.operateType"
            name="radioGroup"
            @change="changeOperateType"
          >
            <a-radio value="1">默认</a-radio>
            <a-radio value="2">按时间运营</a-radio>
            <a-radio value="3">按周运营</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-col>
    </a-row>
    <a-row
      :gutter="8"
      v-if="showoperateTime"
    >
      <a-col
        v-if="time"
        :xs="12"
      >
        <a-form-item
          required
          label="运营时间"
          name="operateTimeBytime"
          :label-col="{ sm: { span: 8 }}"
          :wrapper-Col="{span: 24 }"
          :rules="[{ required: true, message: '请添加运营时间' }]"
        >
          <TimeRangePicker v-model:value="form.operateTimeBytime" />
        </a-form-item>
      </a-col>
      <a-col
        v-if="week"
        :xs="24"
      >
        <a-form-item
          required
          label="运营时间"
          name="operateTimeByWeek"
          :label-col="{ sm: { span: 4 }}"
          :wrapper-Col="{span: 24 }"
          :rules="[{ required: true, message: '请添加运营时间' }]"
        >
          <a-table
            bordered
            :columns="columns"
            :dataSource="form.operateTimeByWeek"
            :scroll="{ x: 'max-content' }"
            :pagination="false"
          >
            <template #headerCell="{ column }">
              <template v-if="column.key === 'action'">
                <SettingOutlined style="margin-right: 5px" />{{ column.title }}
              </template>
            </template>
            <template #bodyCell="{ column,record,index }">
              <template v-if="column.key === 'phase'">
                <a-space>
                  {{index + 1}}
                </a-space>
              </template>
              <template v-if="column.key === 'action'">

                <a-popconfirm
                  title="删除此行？"
                  ok-text="确定"
                  cancel-text="取消"
                  @confirm="deleteRecord(record)"
                >
                  <a-space>
                    <a href="#">删除</a>
                  </a-space>
                </a-popconfirm>

              </template>
              <template v-if=" column.type == 'time'">
                <TimePicker
                  placeholder="请选择"
                  v-model:value="record[column.dataIndex]"
                />
              </template>
              <template v-if=" column.type == 'select'">
                <a-select
                  v-model:value="record[column.dataIndex]"
                  mode="multiple"
                  style="width: 100%"
                  placeholder="请选择"
                  :max-tag-count="1"
                >
                  <a-select-option value="1">周一</a-select-option>
                  <a-select-option value="2">周二</a-select-option>
                  <a-select-option value="3">周三</a-select-option>
                  <a-select-option value="4">周四</a-select-option>
                  <a-select-option value="5">周五</a-select-option>
                  <a-select-option value="6">周六</a-select-option>
                  <a-select-option value="7">周日</a-select-option>
                </a-select>
              </template>
            </template>
          </a-table>
          <a-button
            type="default"
            @click="addRecord"
            :style="{
                    width: '100%',
                    marginTop: '5px',
                    border: '1px dashed #1890ff', 
                    backgroundColor: 'transparent',
                    color: '#1890ff'
                }"
          >
            <PlusOutlined />
            向下添加一行
          </a-button>
        </a-form-item>
      </a-col>
    </a-row>
    <a-row
      :gutter="8"
      v-if="showoperateTime"
    >
      <a-col :xs="24">
        <a-form-item
          label="停运公告"
          name="outageNotice"
          :label-col="{ sm: { span: 4 }}"
          :wrapper-Col="{span: 12 }"
        >
          <a-textarea
            v-model:value="form.outageNotice"
            placeholder="请输入停运公告"
            :rows="4"
          />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="8">
      <a-col :xs="12">
        <a-form-item
          required
          name="accessChannel"
          :rules="[{ required: true, message: '请选择访问渠道' }]"
        >
          <template #label>
            访问渠道
            <a-tooltip title="单独配置支付宝和微信小程序是否可以用车">
              <QuestionCircleOutlined style="margin-left: 5px;color: rgb(192,192,192);" />
            </a-tooltip>
          </template>
          <a-checkbox-group
            v-model:value="form.accessChannel"
            name="accessChannel"
            :options="[ 
                { label: '微信', value: '1' },
                { label: '支付宝', value: '2' }]"
          />
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
</template>

<script setup>
import { ref, defineProps } from 'vue'
import { TimeRangePicker } from 'ant-design-vue'

const formRef = ref();
const time = ref(false);
const week = ref(false);
const showoperateTime = ref(false);
const form = ref({
  isOperate: "1",
  operateType: "1",
  outageNotice: "",
  accessChannel: "",
  operateTimeBytime: "",
  operateTimeByWeek: []
});
const columns = ref([
  {
    title: '周',
    key: 'phase',
    width: 150,
    align: 'center',
    dataIndex: 'phase'
  },
  {
    title: '工作时间',
    key: 'startupTime',
    width: 300,
    align: 'center',
    dataIndex: 'startupTime',
    type: 'time'
  },
  {
    title: '操作',
    key: 'action',
    width: 80,
    align: 'center',
    fixed: 'right',
  }])

const changeIsOperate = () => {

}

const changeOperateType = (data) => {
  const value = data.target.value;
  if (value == "2") {
    showoperateTime.value = true;
    time.value = true;
    week.value = false;
  } else if (value == "3") {
    showoperateTime.value = true;
    week.value = true;
    time.value = false;
  } else {
    week.value = false;
    time.value = false;
    showoperateTime.value = false;
  }
}

</script>
