<template>
  <div class="contradiction-div">
    <div class="search-div">
      <div style="width: 90%">
        <Row class="mb10">
          <Col span="8">
          <span>姓名：</span>
          <Input style="width: 70%" v-model="searchInfo.name" placeholder="请输入" />
          </Col>
          <Col span="8">
          <span>联系方式：</span>
          <Input style="width: 70%" v-model="searchInfo.phone" placeholder="请输入" />
          </Col>
          <Col span="2">
          <Button type="primary" @click="searchData">查询</Button>
          </Col>
           <Col span="2">
            <Button type="primary" @click="revert">重置</Button>
          </Col>
          <Col span="2">
          <Button type="primary" @click="addData">新增</Button>
          </Col>
        </Row>
      </div>
    </div>
    <Table stripe :columns="columns" :data="dataList">
      <!-- <template slot-scope="{ row, index }" slot="city">
        <div>{{ (row.cityName || '') + (row.areaName || '') + (row.streetName || '') + (row.communityName || '') }}
        </div>
      </template> -->
      <template slot-scope="{ row, index }" slot="organization">
        <div>{{ organizationObj[row.organization] }}</div>
      </template>
      <template slot-scope="{ row, index }" slot="levelRegion">
        <div>{{ levelRegionObj[row.levelRegion] }}</div>
      </template>
      <template slot-scope="{ row, index }" slot="resolutionType">
        <div>{{ areaRegionObj[row.resolutionType] }}</div>
      </template>
      <template slot-scope="{ row, index }" slot="files">
        <div>{{ getFiles(row.files) }}</div>
      </template>
      <template slot-scope="{ row, index }" slot="action">
        <div class="flex-div">
          <Button @click="detailData(row)" type="success" class="mr5">详情</Button>
          <Button v-if="row.createUser === $store.state.user.severUserInfo.id " @click="updateData(row)" type="info" class="mr5">编辑</Button>
          <Button v-if="row.createUser === $store.state.user.severUserInfo.id " @click="removeData(row)" type="error" class="mr5">删除</Button>
        </div>
      </template>
    </Table>
    <Page class="page_style" :total="params.totalRecord" :current="params.pageNo" :page-size="params.pageSize"
      @on-change="changePageNo" show-total show-sizer @on-page-size-change="size" />
    <Modal v-model="modal1" :title="title" width="500">
      <Form ref="form" :model="addObj" :rules="ruleValidate" :label-width="150" :disabled="title ==='详情'">
        <Row :gutter="16">
          <Col span="20">
          <FormItem label="姓名" prop="name" required style="">
            <Input v-model="addObj.name" placeholder="请填写"></Input>
          </FormItem>
          </Col>
        </Row>
        <Row :gutter="16">
          <Col span="20">
          <FormItem label="联系方式" prop="phone" required style="">
            <Input v-model="addObj.phone" placeholder="请填写"></Input>
          </FormItem>
          </Col>
        </Row>
        <Row :gutter="16">
          <Col span="20">
          <FormItem label="所属机构组织" prop="organization" required style="">
            <Select style="" v-model="addObj.organization" clearable>
              <Option v-for="(item, index) in organizationList" :key="index" :value="item.value">{{ item.label }}
              </Option>
            </Select>
          </FormItem>
          </Col>
        </Row>
        <Row :gutter="16">
          <Col span="20">
          <FormItem label="市（州） " prop="city" required style="">
            <Select style="" v-model="addObj.city" clearable @on-change="changeCity">
              <Option v-for="(item, index) in cityList" :key="index" :value="item.parent_id">{{ item.name }}</Option>
            </Select>
          </FormItem>
          <FormItem label="县（市、区）" prop="area" style="">
            <Select style="" v-model="addObj.area" clearable @on-change="changeArea">
              <Option v-for="(item, index) in areaList" :key="index" :value="item.parent_id">{{ item.name }}</Option>
            </Select>
          </FormItem>
          <FormItem label="街道（乡镇）" prop="street" style="">
            <Select style="" v-model="addObj.street" clearable @on-change="changeStreet">
              <Option v-for="(item, index) in streetList" :key="index" :value="item.parent_id">{{ item.name }}</Option>
            </Select>
          </FormItem>
          </Col>
        </Row>
        <Row :gutter="16">
          <Col span="20">
          <FormItem label="善于调解的类别" prop="resolutionType" required style="">
            <Select style="" v-model="addObj.resolutionType" clearable>
              <Option v-for="(item, index) in areaRegionList" :key="index" :value="item.value">{{ item.label }}</Option>
            </Select>
          </FormItem>
          </Col>
        </Row>
        <Row :gutter="16">
          <Col span="12">
          <FormItem label="调解资质" required style="">
            <Button :disabled="title == '详情'" type="dashed" style="width: 240px;" long @click="handleAdd" icon="md-add">添加调解资质</Button>
          </FormItem>
          </Col>
        </Row>
        <Row :gutter="16">
          <Col span="20">
          <FormItem v-for="(item, index) in addObj.files" v-if="item.status" :prop="'files.' + index + '.file_name_label'" :key="index" label="" :rules="{required: true, message: '调解资质，第 ' + (index + 1) +' 项不能为空', trigger: 'blur'}">
            <Row>
              <Col span="18">
                <Select style="" v-model="item.file_name_label" filterable clearable allow-create @on-create="handleCreate2" @on-change="(value) => handleFileNameLabelChange(index, value)" @on-clear="() => handleFileNameLabelClear(index)">
                  <Option v-for="(item, index) in nameList" :key="index" :value="item.label">{{ item.label }}</Option>
                </Select>
                <!-- <Input type="text" v-model="item.file_name_label" placeholder="请输入资质名称"></Input> -->
              </Col>
              <Col span="4" offset="1">
                <Button v-if="title !== '详情'" @click="handleRemove(index)">删除</Button>
              </Col>
            </Row>
            <Row>
              <Col span="24" style="display: flex;">
                <Upload v-if="title !== '详情'"    style="margin-top: 10px;width: 100px;"   action="#" :before-upload="(e) => handleUpload(e, index)">
                  <Button icon="ios-cloud-upload-outline">
                    {{ item.fileUrl ? '已上传' : '上传文件' }}
                  </Button>
                </Upload>
                <Button :style="{ 'margin-left': title == '详情' ? '0px' : '22px', 'margin-top': '12px' }" v-if="item.fileUrl !== '' && item.fileUrl !== null" @click="showPreview(item, index)">预览</Button>
              </Col>
            </Row>
          </FormItem>
          </Col>
        </Row>
        <Row :gutter="16">
          <Col span="20">
          <FormItem label="调解工作量" prop="workload" required style="">
            <Input v-model="addObj.workload" placeholder="请填写"></Input>
          </FormItem>
          </Col>
        </Row>
      </Form>
      <div slot="footer">
        <div v-if="title !== '详情'">
          <Button type="text" size="large" @click="modal1 = false">取消</Button>
          <Button type="primary" size="large" @click="doAddData">确定</Button>
        </div>
      </div>
    </Modal>
    <Modal v-model="previewModal" title="预览">
      <img style="width: 100%;height:100%;" :src="previewContent" alt="">
    </Modal>
  </div>
</template>
<script>
import {
  updateDisputeResolution,
  deleteDisputeResolutionById,
  insertDisputeResolution,
  selectDisputeResolutionList,
  getDictInfoList, getSignNeo,
  selectCityList, uploadObjectBase64Neo, getViewFile
} from '@/api/contradiction.js'
import axios from 'axios'
// import { debounce } from '@/libs/tools'
// import { datetime2str } from '@/api/eventlist.js'
export default {
  name: 'register',
  data () {
    return {
      previewModal: false,
      previewContent: '',
      index: 1,
      cityList: [],
      areaList: [],
      streetList: [],
      // communityList: [],
      nameList: [],
      nameObj: {},
      organizationList: [],
      organizationObj: {},
      levelRegionList: [],
      levelRegionObj: {},
      areaRegionList: [],
      areaRegionObj: {},
      type1List: [
        { id: '1', name: 'aaa' },
        { id: '2', name: 'bbb' }
      ],
      title: '',
      ruleValidate: {
        city: [{ required: true, message: '必填', trigger: 'blur' }],
        name: [{ required: true, message: '必填', trigger: 'blur' }],
        phone: [{ required: true, message: '必填', trigger: 'blur' }],
        organization: [{ required: true, message: '必填', trigger: 'blur' }],
        resolutionType: [{ required: true, message: '必选', trigger: 'change' }],
        levelRegion: [{ required: true, message: '必填', trigger: 'blur' }],
        files: [{ required: true, message: '必填', trigger: 'blur' }],
        workload: [{ required: true, message: '必填', trigger: 'blur' }]
      },
      addObj: {
        id: '',
        name: '',
        phone: '',
        organization: '',
        resolutionType: '',
        levelRegion: '',
        workload: '',
        city: '',
        area: '',
        street: '',
        community: '',
        files: []
      },
      modal1: false,
      dataParam: {},
      searchInfo: {},
      columns: [
        { type: 'index', title: '排序', align: 'center', width: '80px' },
        {
          title: '姓名',
          key: 'name',
          align: 'center'
          // width: '160px'
        },
        {
          title: '联系方式',
          key: 'phone',
          align: 'center'
          // width: '150px'
        },
        {
          title: '所属组织机构',
          slot: 'organization',
          align: 'center'
          // width: '150px'
        },
        // {
        //   title: '所属层级',
        //   slot: 'levelRegion',
        //   align: 'center'
        //   // width: '150px'
        // },
        // {
        //   title: '层级',
        //   slot: 'city',
        //   align: 'center',
        //   width: '150px'
        // },
        {
          title: '市（州）',
          key: 'cityName',
          align: 'center'
          // width: '150px'
        },
        {
          title: '县（市、区）',
          key: 'areaName',
          align: 'center'
          // width: '150px'
        },
        {
          title: '街道（乡镇）',
          key: 'streetName',
          align: 'center'
          // width: '150px'
        },
        {
          title: '善于调解的类别',
          slot: 'resolutionType',
          align: 'center',
          width: '150px'
        },
        {
          title: '调解资质',
          slot: 'files',
          align: 'center'
          // width: '150px'
        },
        {
          title: '调解工作量',
          key: 'workload',
          align: 'center'
          // width: '150px'
        },
        {
          title: '操作',
          slot: 'action',
          fixed: 'right',
          align: 'center',
          width: '250'
        }
      ],
      dataList: [],
      upPicData: {},
      uploadList: [],
      uploadIndex: 0,
      params: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0,
        eventType: '2'
      },
      type: '',
      url: '',
      list_url: '',
      dictData: {
        list1: [],
        list2: []
      },
      areaData: {
        list1: [],
        list2: [],
        list3: [],
        list4: []
      }
    }
  },
  mounted () {
    this.type = this.$route.query.type
    this.list_url = selectDisputeResolutionList

    getDictInfoList({ type: 'dispute_resolution_area' }).then((res) => {
      this.organizationList = res.data.data
      let obj = {}
      this.organizationList.forEach(item => {
        obj[item.value] = item.label
      })
      this.organizationObj = Object.assign({}, obj)
    })
    getDictInfoList({ type: 'sys_area_region' }).then((res) => {
      this.levelRegionList = res.data.data.filter(item => {
        return item.value !== '1'
      })
      let obj = {}
      this.levelRegionList.forEach(item => {
        // 暂时去掉省
        if (item.value !== '1') {
          obj[item.value] = item.label
        }
      })
      this.levelRegionObj = Object.assign({}, obj)
    })
    getDictInfoList({ type: 'resolution_type' }).then((res) => {
      this.areaRegionList = res.data.data
      let obj = {}
      this.areaRegionList.forEach(item => {
        obj[item.value] = item.label
      })
      this.areaRegionObj = Object.assign({}, obj)
    })
    getDictInfoList({ type: 'mediator_level' }).then((res) => {
      this.nameList = res.data.data
      let obj = {}
      this.nameList.forEach(item => {
        obj[item.label] = item.value
      })
      this.nameObj = Object.assign({}, obj)
    })
    this.getList()
    selectCityList({}).then((res) => {
      this.cityList = res.data.data
    })
  },
  methods: {
    revert () {
      this.searchInfo = {}
      this.params.pageNo = 1
      this.params.pageSize = 10
      this.searchData()
    },
    handleCreate2 (val) {
      if (val === null || val === '' || val === undefined) return
      this.nameList.push({
        value: val,
        label: val
      })
    },
    handleFileNameLabelClear (index) {
      this.$set(this.addObj.files[index], 'file_name_label', '')
      // this.addObj.files[index]['file_name_label'] = ''
      this.$forceUpdate()
    },
    handleFileNameLabelChange (index, value) {
      this.$set(this.addObj.files[index], 'file_name_label', value)
      this.$forceUpdate()
    },
    getImgUrl (uuid, suffix, item) {
      axios({
        method: 'get',
        responseType: 'arraybuffer',
        url:
          '/api/ac/jilinsscgsdp/uploadService/getObsObject?uuid=' +
          uuid +
          '&&suffix=' +
          suffix
      }).then(function (res) {
        const base64String = btoa(
          new Uint8Array(res.data).reduce(
            (data, byte) => data + String.fromCharCode(byte),
            ''
          )
        )
        item.base64 = 'data:image/' + suffix + ';base64,' + base64String // TODO 可能不是图片
      })
    },
    showPreview (item, index) {
      console.log(item, 'dada')
      window.open(item.fileUrl)
      // if (this.addObj.files[index].base64 === '' || this.addObj.files[index].base64 === null) {
      //   return
      // }
      // this.previewModal = true
      // if (this.title === '新增') {
      //   this.previewContent = this.addObj.files[index].prefix + ',' + this.addObj.files[index].base64
      // } else {
      //   this.previewContent = this.addObj.files[index].base64
      // }
    },
    getFiles (arr) {
      let result = ''
      arr.forEach(e => {
        result += (e.content || '') + '，'
      })
      return result.slice(0, result.length - 1)
    },
    handleRemove (index) {
      this.addObj.files.splice(index, 1)
      this.$forceUpdate()
    },
    uuid () {
      var s = []
      var hexDigits = '0123456789abcdef'
      for (var i = 0; i < 36; i++) {
        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1)
      }
      s[14] = '4'
      s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1)
      s[8] = s[13] = s[18] = s[23] = '-'

      this.uuidA = s.join('')
      return this.uuidA
    },
    handleUpload (file, index) {
      // console.log(file, 'file')
      // const reader = new FileReader()
      // reader.onload = (e) => {
      //   console.log(e, '大大是的')
      //   this.$set(this.addObj.files[index], 'base64', e.target.result.split(',')[1]) // 获取 Base64 编码部分
      //   this.$set(this.addObj.files[index], 'prefix', e.target.result.split(',')[0])
      //   this.$set(this.addObj.files[index], 'suffix', file.name.split('.')[1])
      // }
      // reader.readAsDataURL(file)
      // return false

      let that = this
      that.uploadIndex = index
      this.upPicData.file_name_label = file.name
      this.upPicData.filePath = 'sscgsdp/'
      that.uploadIndex = index
      const reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = () => {
        let index = reader.result.indexOf('base64,') + 7
        that.upPicData.file = reader.result.substring(index)
        that.upPic(that.upPicData)
      }
      return false
    },
    upPic (obj) {
      var time = new Date().getTime()
      this.timeStep = time.toString()
      let param = {
        filePath: obj.filePath,
        fileName: obj.file_name_label,
        timestamp: this.timeStep
      }
      // param.fileName = this.uuid() + '.png'
      this.fileName = obj.file_name_label
      getSignNeo(param).then(res => {
        if (res.data.errcode === 0) {
          uploadObjectBase64Neo({
            sign: res.data.data.sign,
            timestamp: this.timeStep,
            filePath: param.filePath,
            fileName: param.fileName,
            file: obj.file
          }).then(res => {
            if (res.data.errcode === 0) {
              this.addObj.files[this.uploadIndex].fileUrl = res.data.data

              console.log(res.data.data, ' res.data.data')
              this.$Message.success({
                content: '上传成功！'
              })
              this.$forceUpdate()
            } else {
              this.$Notice.error({ title: '上传失败', desc: res.data.data.msg })
            }
          })
        } else {
          this.$Notice.error({ title: '上传失败', desc: res.data.data.msg })
        }
      })
    },
    handleAdd () {
      this.addObj.files.push({
        base64: '',
        file_name_label: '',
        index: this.index,
        status: 1
      })
      this.index++
    },
    changeCity () {
      if (!this.addObj.city) {
        this.areaList = []
        this.streetList = []
        // this.communityList = []
        this.addObj.area = ''
        this.addObj.street = ''
        this.addObj.community = ''
        return
      }
      selectCityList({ parent_id: this.addObj.city }).then((res) => {
        this.areaList = res.data.data
      })
      // 清空下面的数组
      this.streetList = []
      // this.communityList = []
    },
    changeArea () {
      if (!this.addObj.area) {
        this.streetList = []
        // this.communityList = []
        this.addObj.street = ''
        this.addObj.community = ''
        return
      }
      selectCityList({ parent_id: this.addObj.area }).then((res) => {
        this.streetList = res.data.data
      })
      // this.communityList = []
    },
    changeStreet () {
      // if (!this.addObj.street) {
      //   this.communityList = []
      //   this.addObj.community = ''
      //   return
      // }
      // selectCityList({ parent_id: this.addObj.street }).then((res) => {
      //   this.communityList = res.data.data
      // })
    },
    changeCommunity () { },
    size (pageSize) {
      this.params.pageSize = pageSize
      this.changePageNo()
    },
    changePageNo (pageNo) {
      this.params.pageNo = pageNo
      this.getList(this.params)
    },
    getType1 (type) {
      let arr = this.type1List.filter((item) => item.id === type)
      return arr[0].name
    },
    validateFiles (arr) {
      return arr.length > 0 && arr.every((item) => {
        // return item.file_name_label !== '' && item.base64 !== ''
        return item.file_name_label !== '' // 文件暂时可以不传
      })
    },
    doAddData () {
      this.addObj.files.forEach((item) => {
        if (!item['file_name_label']) {
          item['file_name_label'] = ''
        }
      })
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.addObj.files.length === 0) {
            this.$Message.error({
              content: '调解资质必填'
            })
            return
          }
          if (this.title === '新增') {
            // 过滤掉files中status为0的
            this.addObj.files = this.addObj.files.filter((item) => item.status === 1)
            if (!this.validateFiles(this.addObj.files)) {
              this.$Message.error({
                content: '调解资质校验失败'
              })
              return
            }
            // 拼后缀
            this.addObj.files.forEach(item => {
              item.content = item.file_name_label + ''
              if (item.base64) {
                console.log(item.file_name_label, 'item.file_name_label')
                console.log(item.suffix, 'item.suffix')

                this.$set(item, 'fileName', item.file_name_label + '.' + item.suffix)
              } else {
                console.log('放')
                item.fileName = ''
              }
            })
            this.addObj.caseBase = '1'
            console.log(this.addObj, '   this.addObj')
            insertDisputeResolution(this.addObj).then(ret => {
              if (ret.data.errcode === 0) {
                this.$Message.success({
                  content: '新增成功！'
                })
                this.getList(this.params)
              } else {
                this.$Message.error({
                  content: '新增失败\n' + ret.data.errmsg
                })
              }
            })
          } else if (this.title === '编辑') {
            // 过滤掉files中status为0的
            this.addObj.files = this.addObj.files.filter((item) => item.status === 1)
            if (!this.validateFiles(this.addObj.files)) {
              this.$Message.error({
                content: '调解资质校验失败'
              })
              return
            }
            // 拼后缀
            this.addObj.files.forEach(item => {
              item.content = item.file_name_label + ''
              if (item.base64 === '' || item.base64 === null) {
                item.file_name_label = ''
              } else {
                item.fileName = item.file_name_label + '.' + item.suffix
                // 修改需要去掉base64前缀
                let base64Arr = item.base64.split(',')
                if (base64Arr.length === 1) {
                  item.base64 = base64Arr[0]
                } else {
                  item.base64 = base64Arr[1]
                }
              }
            })
            updateDisputeResolution(this.addObj).then(ret => {
              if (ret.data.errcode === 0) {
                this.$Message.success({
                  content: '修改成功！'
                })
                this.getList(this.params)
              } else {
                this.$Message.error({
                  content: '修改失败\n' + ret.data.errmsg
                })
              }
            })
          }
          this.modal1 = false
        } else {
          this.$Message.error('校验失败!')
        }
      })
    },
    addData () {
      this.addObj = {
        files: []
      }
      this.title = '新增'
      this.$refs['form'].resetFields()
      this.modal1 = true
    },
    updateData (row) {
      this.title = '编辑'
      // this.$refs['form'].resetFields()
      this.modal1 = true
      this.addObj.id = row.id
      // this.addObj.name = row.name
      this.$set(this.addObj, 'name', row.name)
      this.addObj.phone = row.phone
      this.addObj.organization = row.organization
      this.addObj.resolutionType = row.resolutionType
      this.addObj.levelRegion = row.levelRegion
      this.addObj.workload = row.workload
      this.addObj.city = row.city
      this.setFileParam(row)
      selectCityList({ parent_id: this.addObj.city }).then((res) => {
        this.areaList = res.data.data
        this.addObj.area = row.area
        selectCityList({ parent_id: this.addObj.area }).then((res) => {
          this.streetList = res.data.data
          this.addObj.street = row.street
          // selectCityList({ parent_id: this.addObj.street }).then((res) => {
          //   this.communityList = res.data.data
          //   this.addObj.community = row.community
          // })
        })
      })
    },
    setFileParam (row) {
      this.index = row.files.length - 1
      this.addObj.files = row.files.map((item, index) => {
        if (!this.nameObj[item.content]) {
          // 需要创建新条目
          this.nameObj[item.content] = item.content
          this.nameList.push({ label: item.content, value: item.content })
        }
        if (item.file_name_label) {
          let suffix = item.file_name_label.split('.').pop()
          if (item.base64 !== null && item.base64 !== '') {
            this.getImgUrl(item.obsKey, suffix, item)
          }
          item.status = 1
          item.index = index
          item.file_name_label = item.content
          item.suffix = suffix
          return item
        } else {
          // 没传文件
          item.status = 1
          item.index = index
          item.file_name_label = item.content
          return item
        }
      })
    },
    viewFile (row) {
      getViewFile({ id: row.id }).then(ret => {
        if (ret.data.errcode === 0) {
          console.log(ret, 'viewFile')
        } else {
        }
      })
    },
    detailData (row) {
      this.title = '详情'
      this.$refs['form'].resetFields()
      this.modal1 = true
      this.addObj.id = row.id
      this.addObj.name = row.name
      this.addObj.phone = row.phone
      this.addObj.organization = row.organization
      this.addObj.resolutionType = row.resolutionType
      this.addObj.levelRegion = row.levelRegion
      this.addObj.workload = row.workload
      this.addObj.city = row.city
      this.setFileParam(row)
      this.viewFile(row)
      selectCityList({ parent_id: this.addObj.city }).then((res) => {
        this.areaList = res.data.data
        this.addObj.area = row.area
        selectCityList({ parent_id: this.addObj.area }).then((res) => {
          this.streetList = res.data.data
          this.addObj.street = row.street
          // selectCityList({ parent_id: this.addObj.street }).then((res) => {
          //   this.communityList = res.data.data
          //   this.addObj.community = row.community
          // })
        })
      })
    },
    removeData (row) {
      this.$Modal.confirm({
        title: '确认删除？',
        // content: '此操作会删除该菜单下全部菜单',
        loading: true,
        onOk: () => {
          this.deleteArea(row.id)
        }
      })
    },
    deleteArea (val) {
      deleteDisputeResolutionById({ id: val }).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Modal.remove()
          this.getList(this.params)
          this.$Message.success({
            content: '删除成功！'
          })
        } else {
          this.$Modal.remove()
          this.$Message.error({
            content: '删除失败\n' + ret.data.errmsg
          })
        }
      })
    },
    getList (item) {
      this.list_url(item).then((res) => {
        if (res.data.errcode === 0) {
          this.dataList = res.data.data.results
          // this.dataList.forEach(item => {
          //   this.areaRegionList.forEach(item1 => {
          //     if (item.resolutionType === item1.value) {
          //       item.resolutionType = item1.label
          //     }
          //   })
          //   //
          // })
          this.params.totalRecord = res.data.data.totalRecord
        }
      })
    },
    searchData () {
      this.getList(this.searchInfo)
    }
  },
  computed: {
    serverUserInfo () {
      return this.$store.state.user.severUserInfo
    }
  }
}
</script>
<style scoped lang="less">
.page_style {
  margin-top: 10px;
  text-align: right;
}

.contradiction-div {
  padding: 10px;

  .search-div {
    float: left;
    width: 100%;
    padding: 15px 30px 15px 15px;
    // min-height: 200px;
    border: 1px solid skyblue;
    border-radius: 5px;
    background-color: #f6fdfd;
    margin-bottom: 15px;
  }
}

.mb10 {
  // margin-bottom: 10px;
}

.mb20 {
  margin-bottom: 20px;
}

.mt8 {
  margin-top: 8px;
}

.mr15 {
  margin-right: 15px;
}

.mr5 {
  margin-right: 5px;
}

.flex-div {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
</style>
