<template>

  <div class="outbox">
    <div class="out-border">
      <el-row class="con1">
        <el-form ref="form1" :model="adapter" :rules="rules">
          <font class="notice">数据清理后无法恢复，只能通过线下重新同步，请谨慎操作</font>
          <el-form-item label="项目编号" prop="projectNo">
            <el-col :span="24">
              <el-input v-model="adapter.projectNo" type="text" />
            </el-col>
          </el-form-item>
        </el-form>

        <el-col :span="24">
          <el-link type="primary" :underline="true" style="margin-right: 30px" @click="checkAll">全选</el-link>
          <br>
          <el-checkbox v-model="adapter.data_org" :true-label="true" :false-label="false">组织</el-checkbox>
          <el-checkbox v-model="adapter.data_area" :true-label="true" :false-label="false">区域</el-checkbox>
          <el-checkbox v-model="adapter.data_customer" :true-label="true" :false-label="false">人员</el-checkbox>

          <br>
          <el-checkbox v-model="adapter.data_park" :true-label="true" :false-label="false">车场</el-checkbox>
          <el-checkbox v-model="adapter.data_card" :true-label="true" :false-label="false">套餐</el-checkbox>
          <el-checkbox v-model="adapter.data_cardLongLease" :true-label="true" :false-label="false">固定车</el-checkbox>
          <el-checkbox v-model="adapter.data_carIn" :true-label="true" :false-label="false">场内车</el-checkbox>
          <el-checkbox v-model="adapter.data_parkRecord" :true-label="true" :false-label="false">车场记录</el-checkbox>

        </el-col>
      </el-row>

    </div>
    <el-row>
      <el-col :span="12">
        <el-button type="default" @click="init">重置</el-button>
        <el-button type="primary" @click="save">清理</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
const adapterModel = {
  projectNo: '', // 项目编号
  data_org: false, // 组织
  data_area: false, // 区域
  data_customer: false, // 人员

  data_park: false, // 车场
  data_card: false, // 套餐
  data_cardLongLease: false, // 固定车
  data_carIn: false, // 场内车
  data_parkRecord: false // 车场记录
}
import { clear, getClear } from '@/apiV2/data'
export default {
  components: {
  },
  data() {
    return {
      rules: {
        projectNo: [
          {
            required: true,
            message: '请输入项目编号',
            trigger: 'blur'
          }
        ]
      },
      loading: false,
      adapter: { ...adapterModel }
    }
  },
  async created() {
    await this.init()
  },
  methods: {
    checkAll() {
      for (const p in this.adapter) {
        if (p.indexOf('data_') == 0) this.adapter[p] = true
      }
    },
    async init() {
      this.adapter = { ...adapterModel }
      const res = await getClear()
      if (res.success) {
        console.error(res)
      }
    },
    async save() {
      if (!await this.$refs.form1.validate()) return
      const bizDataList = []
      for (const p in this.adapter) {
        if (this.adapter[p] === true) bizDataList.push(p.replace('data_', ''))
      }
      if (bizDataList.length == 0) return this.$message.error('请选择需要清理的数据')
      if (await this.$confirm(`<p class="text-center">数据清理后无法恢复，请确认项目编号</p><br/><p class="text-center">${this.adapter.projectNo}</p>`, '温馨提示', { dangerouslyUseHTMLString: true }) != 'confirm') return
      clear({ bizDataList, projectNo: this.adapter.projectNo }).then().finally(() => { this.loading = false })
    }
  }
}
</script>

<style lang="scss" scoped>
.notice{
  color: red;
}
.outbox {
  margin: 20px;
}

.con1 {
  margin-right: 10px;
  margin-bottom: 10px;
  margin-left: 20px;
  line-height: 35px;
  align-items: center;

  span {
    display: inline-block;
    line-height: 22px;
  }

  .autoOff {
    display: flex;
    align-items: center;
  }

  .spancolor {
    padding-right: 20px;
  }
}

.out-border {
  width: 75%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #eee;
  border-radius: 10px;
}

</style>
