<template>
  <div class="sysseting-container">
    <el-tabs v-model="activeTab">
      <el-tab-pane label="基本信息" name="base">
        <el-form :model="baseForm" label-width="120px" class="tab-form">
          <el-form-item label="投诉电话">
            <el-input v-model="baseForm.phone" placeholder="请输入投诉电话" style="width: 300px" />
          </el-form-item>
          <el-form-item label="抢单开始时间">
            <el-time-picker v-model="baseForm.startTime" placeholder="选择时间" format="HH:mm" value-format="HH:mm" style="width: 150px" />
          </el-form-item>
          <el-form-item label="抢单结束时间">
            <el-time-picker v-model="baseForm.endTime" placeholder="选择时间" format="HH:mm" value-format="HH:mm" style="width: 150px" />
          </el-form-item>
          <el-form-item label="质保金扣除比例">
            <el-input-number v-model="baseForm.marginRate" :min="0" :max="100" />
            <span style="margin-left: 8px">%</span>
          </el-form-item>
          <el-form-item label="下单送积分">
            <el-input v-model="baseForm.orderScore" style="width: 120px" />
            <el-tooltip content="下单支付金额多少元赠送1积分，不填则不赠送" placement="right">
              <i class="el-icon-question" style="margin-left: 8px; color: #999" />
            </el-tooltip>
          </el-form-item>
          <el-form-item label="搜索热词">
            <el-select v-model="baseForm.hotwords" multiple filterable allow-create default-first-option placeholder="请输入热词" style="width: 600px">
              <el-option v-for="item in baseForm.hotwords" :key="item" :label="item" :value="item" />
            </el-select>
          </el-form-item>
          <el-form-item label="客服二维码">
            <el-upload
              class="avatar-uploader"
              action="#"
              :show-file-list="false"
              :on-change="handleQrChange"
              :before-upload="beforeQrUpload"
            >
              <img v-if="baseForm.qrUrl" :src="baseForm.qrUrl" class="qr-img" />
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitBase">提交</el-button>
            <el-button @click="resetBase">重置</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="文本配置" name="text">
        <el-form :model="textForm" label-width="120px" class="tab-form">
          <el-form-item label="公司名称">
            <el-input v-model="textForm.company" placeholder="请输入公司名称" />
          </el-form-item>
          <el-form-item label="简介">
            <el-input type="textarea" v-model="textForm.intro" :rows="4" placeholder="请输入公司简介" />
          </el-form-item>
          <el-form-item label="质保金说明">
            <quill-editor v-model="textForm.marginDesc" :options="editorOptions" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitText">提交</el-button>
            <el-button @click="resetText">重置</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="下单时间配置" name="orderTime">
        <el-form label-width="120px" class="tab-form">
          <el-form-item label="下单时间">
            <div v-for="(item, idx) in orderTimes" :key="idx" style="display: flex; align-items: center; margin-bottom: 8px;">
              <el-input v-model="item.time" placeholder="如 8:00-10:00" style="width: 30%; margin-right: 12px;" />
              <el-input-number v-model="item.count" :min="0" style="width: 25%; margin-right: 12px;" />
              <el-button icon="el-icon-delete" type="danger" @click="removeOrderTime(idx)" circle />
            </div>
            <el-button type="primary" icon="el-icon-plus" @click="addOrderTime">新增</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitOrderTime">提交</el-button>
            <el-button @click="resetOrderTime">重置</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="时间配置" name="time">
        <el-form :model="timeForm" label-width="120px" class="tab-form">
          <el-form-item label="每月提现时间">
            <el-select v-model="timeForm.withdrawDays" multiple placeholder="请选择日期" style="width: 300px">
              <el-option v-for="d in 31" :key="d" :label="d + '号'" :value="d + '号'" />
            </el-select>
          </el-form-item>
          <el-form-item label="定时接单时长">
            <el-input-number v-model="timeForm.autoOrderMinutes" :min="1" style="width: 120px" />
            <span style="margin-left: 8px">分钟</span>
            <div class="el-form-item__tip">订单无人接单时多少分钟后，自动重新派单。单位（分钟）</div>
          </el-form-item>
          <el-form-item label="取消订单时长">
            <el-input-number v-model="timeForm.cancelOrderDays" :min="1" style="width: 120px" />
            <span style="margin-left: 8px">天</span>
            <div class="el-form-item__tip">师傅到达之后，多久之后没有报工则取消订单。单位（天）</div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitTime">提交</el-button>
            <el-button @click="resetTime">重置</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

export default {
  name: 'SysSeting',
  components: {
    quillEditor
  },
  data() {
    return {
      activeTab: 'base',
      // 基本信息
      baseForm: {
        phone: '',
        startTime: '',
        endTime: '',
        marginRate: 10,
        orderScore: 100,
        hotwords: ['水电维修', '家电清洗', '灯具维修', '墙面翻新', '门窗家具', '疏通维修', '防水维修'],
        qrUrl: ''
      },
      // 文本配置
      textForm: {
        company: '',
        intro: '',
        marginDesc: ''
      },
      // 下单时间配置
      orderTimes: [
        { time: '8:00-10:00', count: 99 },
        { time: '10:00-12:00', count: 99 },
        { time: '12:00-14:00', count: 99 },
        { time: '14:00-16:00', count: 99 },
        { time: '16:00-18:00', count: 99 },
        { time: '18:00-20:00', count: 99 },
        { time: '20:00-22:00', count: 99 },
        { time: '22:00-24:00', count: 99 }
      ],
      // 时间配置
      timeForm: {
        withdrawDays: ['8号', '18号', '28号'],
        autoOrderMinutes: 10,
        cancelOrderDays: 7
      },
      editorOptions: {
        placeholder: '请输入质保金说明...'
      }
    }
  },
  methods: {
    // 基本信息
    submitBase() {
      this.$message.success('提交成功（模拟）')
    },
    resetBase() {
      this.$refs.baseForm && this.$refs.baseForm.resetFields && this.$refs.baseForm.resetFields()
    },
    handleQrChange(file) {
      // 模拟上传二维码
      const reader = new FileReader()
      reader.onload = e => {
        this.baseForm.qrUrl = e.target.result
      }
      reader.readAsDataURL(file.raw)
    },
    beforeQrUpload(file) {
      const isImg = file.type.startsWith('image/')
      if (!isImg) {
        this.$message.error('只能上传图片格式')
      }
      return isImg
    },
    // 文本配置
    submitText() {
      this.$message.success('提交成功（模拟）')
    },
    resetText() {
      this.textForm = { company: '', intro: '', marginDesc: '' }
    },
    // 下单时间配置
    addOrderTime() {
      this.orderTimes.push({ time: '', count: 99 })
    },
    removeOrderTime(idx) {
      this.orderTimes.splice(idx, 1)
    },
    submitOrderTime() {
      this.$message.success('提交成功（模拟）')
    },
    resetOrderTime() {
      this.orderTimes = [
        { time: '8:00-10:00', count: 99 },
        { time: '10:00-12:00', count: 99 },
        { time: '12:00-14:00', count: 99 },
        { time: '14:00-16:00', count: 99 },
        { time: '16:00-18:00', count: 99 },
        { time: '18:00-20:00', count: 99 },
        { time: '20:00-22:00', count: 99 },
        { time: '22:00-24:00', count: 99 }
      ]
    },
    // 时间配置
    submitTime() {
      this.$message.success('提交成功（模拟）')
    },
    resetTime() {
      this.timeForm = { withdrawDays: ['8号', '18号', '28号'], autoOrderMinutes: 10, cancelOrderDays: 7 }
    }
  }
}
</script>

<style scoped>
.sysseting-container {
  background: #fff;
  padding: 24px;
  min-height: 600px;
}
.tab-form {
  max-width: 900px;
}
.qr-img {
  width: 120px;
  height: 120px;
  border: 1px solid #eee;
  display: block;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar-uploader-icon {
  font-size: 32px;
  color: #8c939d;
}
</style>
