<template>
  <div class="contradiction-div">
    <Tabs value="2" @on-click="tabChange">
      <TabPane label="办理中" name="2"></TabPane>
      <TabPane label="已办结" name="1"></TabPane>
    </Tabs>
    <div class="search-div">
      <div style="width:90%;float: left;">
        <Row class="mb10">
          <!--          <Col span="6">-->
          <!--            <span>部门受理状况：</span>-->
          <!--            <Select style="width: 60%" v-model="searchInfo.status"    :clearable="true">-->
          <!--              <Option value="1">待受理</Option>-->
          <!--              <Option value="2">已受理 </Option>-->
          <!--              <Option value="3">已完成</Option>-->
          <!--            </Select>-->
          <!--          </Col>-->
          <Col span="6">
            <span>纠纷编号：</span>
            <Input style="width: 70%;" v-model="searchInfo.eventCode" placeholder="请输入纠纷编号"/>
          </Col>
          <Col span="6">
            <span>纠纷大类：</span>
            <Select v-model="searchInfo.info" @on-change="changeDispute(searchInfo.info)" :clearable="true"
                    style="width:70%">
              <Option v-for="item in dictData.list1" :value="JSON.stringify(item)" :key="item.value">{{
                  item.label
                }}
              </Option>
            </Select>
          </Col>
          <Col span="6">
            <span>纠纷小类：</span>
            <Select v-model="searchInfo.eventTypeId" :clearable="true" style="width:70%">
              <Option v-for="item in dictData.list2" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </Col>
        </Row>
        <Row class="mb10">
          <!--          <Col span="6">
                      <span>是否完结：</span>
                      <Select style="width: 70%;" v-model="searchInfo.status" :clearable="true" >
                        <Option value="1">已办结</Option>
                        <Option value="2">办理中</Option>
                      </Select>
                    </Col>-->
          <Col span="6">
            <span>化解是否满意：</span>
            <Select style="width: 61%;" v-model="searchInfo.isSatisfaction">
              <Option value="1">是</Option>
              <Option value="2">否</Option>
            </Select>
          </Col>
          <Col span="6">
            <span>发生纠纷地市：</span>
            <Select v-model="searchInfo.cityId" @on-change="changeArea('2',searchInfo.cityId)" :clearable="true"
                    placeholder="请选择市" style="width:61%">
              <Option v-for="item in areaData.list1" :value="item.parent_id" :key="item.parent_id">{{
                  item.name
                }}
              </Option>
            </Select>
          </Col>
        </Row>
        <Row class="mb10">
          <Col span="6">
            <span>发生纠纷县（市、区）：</span>
            <Select v-model="searchInfo.areaId" @on-change="changeArea('3',searchInfo.areaId)" :clearable="true"
                    placeholder="请选择县（市、区）" style="width:61%">
              <Option v-for="item in areaData.list2" :value="item.parent_id" :key="item.parent_id">{{
                  item.name
                }}
              </Option>
            </Select>
          </Col>
          <Col span="6">
            <span>发生纠纷街道：</span>
            <Select v-model="searchInfo.streetId" @on-change="changeArea('4',searchInfo.streetId)" :clearable="true"
                    placeholder="请选择街道" style="width:61%">
              <Option v-for="item in areaData.list3" :value="item.parent_id" :key="item.parent_id">{{
                  item.name
                }}
              </Option>
            </Select>
          </Col>
          <Col span="6">
            <span>发生纠纷社区：</span>
            <Select v-model="searchInfo.communityId" placeholder="请选择社区" :clearable="true" style="width:61%">
              <Option v-for="item in areaData.list4" :value="item.parent_id" :key="item.parent_id">{{
                  item.name
                }}
              </Option>
            </Select>
          </Col>
          <Col span="6">
            <span>发生纠纷网格：</span>
            <Input style="width: 61%;" v-model="searchInfo.gardenId" placeholder="请输入网格"/>
          </Col>
        </Row>
        <Row class="mb10" v-if="!isShowMore">
          <Col span="6">
            <span>是否超时：</span>
            <Select style="width: 70%;" v-model="searchInfo.isEarlyWarning">
              <Option value="1">正常</Option>
              <Option value="3">预警</Option>
              <Option value="4">告警</Option>
            </Select>
          </Col>
          <Col span="6">
            <span>当事人：</span>
            <Input style="width: 74%;" v-model="searchInfo.eventUserName" placeholder="请输入当事人姓名"/>
          </Col>
          <Col span="6">
            <span>身份证号码：</span>
            <Input style="width: 65%;" v-model="searchInfo.eventCardno" placeholder="请输入身份证号码"/>
          </Col>
          <Col span="6">
            <span>联系电话：</span>
            <Input style="width: 70%;" v-model="searchInfo.eventTel" placeholder="请输入联系电话"/>
          </Col>
        </Row>
        <Row v-if="!isShowMore" class="mb10">
          <Col span="6">
            <span>纠纷发生时间：</span>
            <DatePicker type="datetime" v-model="searchInfo.occurrenceTimeStart" :clearable="true" style="width: 60%;"
                        placeholder="请选择纠纷发生开始时间"></DatePicker>
          </Col>
          <Col span="1" class="mt8">
            <span>至</span>
          </Col>
          <Col span="5">
            <DatePicker type="datetime" v-model="searchInfo.occurrenceTimeEnd" :clearable="true" style="width: 90%;"
                        placeholder="请选择纠纷发生结束时间"></DatePicker>
          </Col>
          <Col span="6">
            <span>纠纷化解时间：</span>
            <DatePicker type="datetime" v-model="searchInfo.resolveTimeStart" style="width: 60%;"
                        placeholder="请选择纠纷化解开始时间"></DatePicker>
          </Col>
          <Col span="1" class="mt8">
            <span>至</span>
          </Col>
          <Col span="4">
            <DatePicker type="datetime" v-model="searchInfo.resolveTimeEnd" style="width: 100%;"
                        placeholder="请选择纠纷化解结束时间"></DatePicker>
          </Col>
        </Row>
        <Row v-if="!isShowMore" class="mb10">
          <Col span="6">
            <span>创建时间：</span>
            <DatePicker v-model="searchInfo.createTimeStart" :clearable="true" placeholder="请选择纠纷发生开始时间"
                        style="width: 60%" type="datetime"></DatePicker>
          </Col>
          <Col class="mt8" span="1">
            <span>至</span>
          </Col>
          <Col span="5">
            <DatePicker v-model="searchInfo.createTimeEnd" :clearable="true" placeholder="请选择纠纷发生结束时间"
                        style="width: 90%" type="datetime"></DatePicker>
          </Col>
          <Col span="6">
            <span>化解方式：</span>
            <Select v-model="searchInfo.resolveWay" :clearable="true" placeholder="请选择化解方式" style="width: 70%">
              <Option value="1">人民调解</Option>
              <Option value="2">行政调解</Option>
              <Option value="3">司法调解</Option>
              <Option value="4">行业调解</Option>
              <Option value="5">仲裁</Option>
              <Option value="8">行政复议</Option>
              <Option value="9">行政裁决</Option>
              <Option value="10">法律监督</Option>
              <Option value="6">诉讼</Option>
              <Option value="11">信访三级办理</Option>
              <Option value="7">其他</Option>
            </Select>
          </Col>
        </Row>
        <Row class="mb10" style="margin-top: 10px;">
          <Col span="6">
            <span>是否涉众：</span>
            <Select
              style="width: 70%"
              v-model="searchInfo.is_involve_everyone"
              :clearable="true"
            >
              <Option value="1">是</Option>
              <Option value="0">否</Option>
            </Select>
          </Col>
          <Col span="6">
            <span>涉众人数范围：</span>
            <Select
              style="width: 60%"
              v-model="searchInfo.is_involve_everyone_count"
              :clearable="true"
            >
              <Option value="0">5-30人</Option>
              <Option value="1">31-300人</Option>
              <Option value="2">300人以上</Option>
            </Select>
          </Col>
          <Col span="6">
            <span>矛盾事件进度：</span>
            <Select
              style="width: 60%"
              v-model="searchInfo.logType"
              :clearable="true"
            >
              <Option value="1">已上报</Option>
              <Option value="2">已处置</Option>
              <Option value="3">已转办</Option>
              <Option value="4">已退回</Option>
              <!--              <Option value="5">横传</Option>-->
              <Option value="6">已下派</Option>
              <Option value="0">已办结</Option>
            </Select>
          </Col>
        </Row>
      </div>
      <div style="width:10%;float: left;">
        <Row>
          <Col span="12">
            <Button type="primary" @click="searchData">搜索</Button>
          </Col>
          <Col span="12">
            <Button type="primary" @click="resert">重置</Button>
          </Col>
          <Col offset="2" span="10">
            <div @click="isShowMore = !isShowMore" class="show-more">
              {{ isShowMore ? '更多' : '收起' }}
              <Icon :type="isShowMore ?'ios-arrow-down':'ios-arrow-up'"></Icon>
            </div>
          </Col>
        </Row>
      </div>
    </div>
    <Table stripe :columns="columns1" :data="dataList">

      <!-- 风险因子名称-->
      <template slot-scope="{ row, index }" slot="riskNameText">
        <TableTextEllipsis :text="row.riskName" :lines="2"/>
      </template>

      <!-- 纠纷描述-->
      <template slot-scope="{ row, index }" slot="disputeDescriptionText">
        <TableTextEllipsis :text="row.disputeDescription" :lines="2"/>
      </template>

      <!-- 详细地址-->
      <template slot-scope="{ row, index }" slot="addressText">
        <TableTextEllipsis :text="row.address" :lines="2"/>
      </template>

      <!-- <template slot-scope="{ row, index }" slot="status">
        <div v-if="row.status == '1'">待受理</div>
        <div v-else-if="row.status == '2'">已受理</div>
        <div v-else-if="row.status == '3'">已完成</div>
      </template>
      <template slot-scope="{ row, index }" slot="event_source">
        <div v-if="row.event_source == '1'">网格员上报</div>
        <div v-else-if="row.event_source == '2'">委办局推送</div>
        <div v-else-if="row.event_source == '3'">上级督办</div>
      </template> -->
      <template slot-scope="{ row, index }" slot="riskName">
        {{ row.riskName ? row.riskName.split(',').length : '' }}
      </template>
      <template slot-scope="{ row, index }" slot="logType">
        <div v-if="row.eventStatus !=='1'">
          <div v-if="row.logType === '1'">已上报</div>
          <div v-else-if="row.logType === '2'">已处置</div>
          <div v-else-if="row.logType === '3'">已转办</div>
          <div v-else-if="row.logType === '4'">已退回</div>
          <!--        <div v-else-if="row.mineLatestLogTypeNew === '5'">横传</div>-->
          <div v-else-if="row.logType === '6'">已下派</div>
          <div v-else-if="row.logType === '0'">已办结</div>
        </div>
        <div v-if="row.eventStatus ==='1'">
          <div>已办结</div>
        </div>
      </template>
      <template slot-scope="{ row, index }" slot="warningLight">
        <span v-if="row.warningLight === false"></span>
        <img v-else
             class="level-option-img"
             src="@/assets/images/warning6.png"
             alt=""
        />
      </template>
      <template slot-scope="{ row, index }" slot="eventStatus">
        <div v-if="row.eventStatus == '1'">已处置</div>
        <div v-else-if="row.eventStatus == '2'">处理中</div>
      </template>
      <template slot-scope="{ row, index }" slot="status">
        <div v-if="row.status == '1'">待受理</div>
        <div v-else-if="row.status == '2'">已受理</div>
        <div v-else-if="row.status == '3'">已完成</div>
      </template>
      <template slot-scope="{ row, index }" slot="isEarlyWarning">
        <div class="flex-div">
          <div class="circle-div1" v-if="row.isEarlyWarning == '1'"></div>
          <div class="circle-div2" v-if="row.isEarlyWarning == '3'"></div>
          <div class="circle-div3" v-if="row.isEarlyWarning == '4'"></div>
        </div>
      </template>
      <template slot-scope="{ row, index }" slot="warningState">
        {{ row.warningState }}
      </template>
      <template slot-scope="{ row, index }" slot="isPointEvent">
        <div v-if="row.isPointEvent == '1'">是</div>
        <div v-else-if="row.isPointEvent == '2'">否</div>
      </template>
      <template slot-scope="{ row, index }" slot="occurrenceAddress">
        <span>{{ row.city }}{{ row.area }}{{ row.street }}{{ row.community }}</span>
      </template>
      <template slot-scope="{ row, index }" slot="riskLevel">
        <div class="flex-div">
          <div v-if="row.riskLevel == '一般矛盾纠纷'">
            <img class="level-option-img" src="@/assets/images/warning4.png" alt="">
            <span style="padding-left: 10px;">一般矛盾纠纷</span>
          </div>
          <div v-if="row.riskLevel == '复杂矛盾纠纷'">
            <img class="level-option-img" src="@/assets/images/warning5.png" alt="">
            <span style="padding-left: 10px;">复杂矛盾纠纷</span>
          </div>
          <div v-if="row.riskLevel == '重大矛盾纠纷'">
            <img class="level-option-img" src="@/assets/images/warning6.png" alt="">
            <span style="padding-left: 10px;">重大矛盾纠纷</span>
          </div>
        </div>
      </template>
      <template slot-scope="{ row, index }" slot="action">
        <div class="flex-div">
          <Button type="primary" class="mr5" @click="getInfo(row)">详情</Button>
          <Button type="primary" class="mr5" @click="disposeView(row)">处置意见</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="czModal" title="处置意见" width="900">
      <Card class="mb10">
        <Form v-if="company_grade < 6" ref="czFormDataRef" :model="czFormData" label-position="top">
          <FormItem label="超期预警处置意见：" prop="opinion" required
                    :rules="[{required: true, message: '必填', trigger: 'blur'}]">
            <Input v-model="czFormData.opinion" :maxlength="255" :rows="3" placeholder="请输入超期预警处置意见"
                   style="margin-top:10px;" type="textarea"/>
          </FormItem>
        </Form>
        <div class="flex-div" v-if="company_grade < 6">
          <Button type="primary" @click="saveCzYj()">保存</Button>
        </div>
      </Card>
      <Table :columns="columns2" :data="dataList2">
        <template slot-scope="{row, index}" slot="opinion">
          <Input v-model="row.opinion" :disabled="row.disabled" :rows="3" type="textarea"
                 style="margin-top:5px;margin-bottom:5px;" placeholder="请输入超期预警处置意见"/>
        </template>
        <template slot-scope="{row, index}" slot="action">
          <Button type="primary" v-if="row.createByName === name" @click="editCzYj(row)">{{ row.buttonText }}</Button>
        </template>
      </Table>
      <div slot="footer">
        <Button type="default" @click="czModal = false">关闭</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import {
  selectCityList,
  selectDictList,
  insertEventOpinion,
  selectOpinionList,
  updateEventOpinion,
  findEarlyWarningStatusList
} from '@/api/contradiction.js'
import { datetime2str } from '@/api/eventlist.js'

export default {
  name: 'register',
  data () {
    return {
      isShowMore: true,
      searchInfo: {},
      columns1: [
        { type: 'index', title: '序号', align: 'center', width: '80px' },
        // { title: '部门受理状况', slot: 'status', align: 'center', width: '110px' },
        { title: '矛盾事件进度', slot: 'logType', align: 'center', width: '110px' },
        // { title: '矛盾状态', slot: 'status', align: 'center', width: '100px' },
        // { title: '矛盾来源', slot: 'event_source', align: 'center', width: '100px' },
        { title: '纠纷编号', key: 'eventCode', align: 'center', width: '160px' },
        { title: '超时提示', slot: 'isEarlyWarning', align: 'center', width: '90px' },
        { title: '风险等级', slot: 'riskLevel', align: 'center', width: '140px' },
        // { title: '重点矛盾', slot: 'isPointEvent', align: 'center', width: '90px' },
        { title: '纠纷大类', key: 'eventCategoryId', align: 'center', width: '90px' },
        { title: '纠纷小类', key: 'eventTypeId', align: 'center', width: '90px' },
        {
          title: '风险因子个数',
          slot: 'riskName',
          align: 'center',
          width: '80px'
        },
        {
          title: '风险因子名称',
          slot: 'riskNameText',
          align: 'center',
          width: '140px'
        },
        {
          title: '回访预警',
          slot: 'warningLight',
          align: 'center',
          width: '90px'
        },
        {
          title: '回访状态',
          slot: 'warningState',
          align: 'center',
          width: '100px'
        },
        { title: '纠纷发生时间', key: 'occurrenceTime', align: 'center', width: '150px' },
        { title: '纠纷描述', slot: 'disputeDescriptionText', align: 'center', width: '140px' },
        { title: '纠纷发生地', slot: 'occurrenceAddress', align: 'center', width: '200px' },
        { title: '详细地址', slot: 'addressText', align: 'center', width: '140px' },
        { title: '上报人', key: 'reportingName', align: 'center', width: '90px' },
        { title: '上报单位', key: 'reportingUnit', align: 'center', width: '100px' },
        { title: '操作', slot: 'action', fixed: 'right', align: 'center', width: '220px' }

      ],
      dataList: [],
      params: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0
      },
      type: this.$route.query.type,
      url: '',
      dictData: {
        list1: [],
        list2: []
      },
      areaData: {
        list1: [],
        list2: [],
        list3: [],
        list4: []
      },
      czModal: false, // 处置意见弹出框
      czModal1: false, // 处置意见修改弹出框
      czFormData: {},
      columns2: [
        { type: 'index', title: '序号', align: 'center', width: '60px' },
        { title: '创建人', key: 'createByName', align: 'center' },
        { title: '创建时间', key: 'createTime', align: 'center' },
        { title: '内容', slot: 'opinion', align: 'center', width: '400px' }
      ], // 处置意见列表
      dataList2: [],
      id: '',
      buttonText: '修改'
    }
  },
  mounted () {
    this.tabChange('2')
    this.getDictList('1')
    this.getCityData('1')
    this.getColumns()
  },
  methods: {
    tabChange (e) {
      this.params.pageNo = 1 // 重置页码为1
      this.searchInfo.status = e
      this.getList(this.searchInfo)
    },
    getDictList (level, id, eventTypeId) {
      selectDictList({ type: 'event_category', parent_id: id }).then(res => {
        if (res.data.errcode === 0) {
          this.dictData['list' + level] = res.data.data
          if (eventTypeId) {
            this.dictData.list2.forEach(element => {
              if (eventTypeId === element.label) {
                this.formInline.eventTypeId = element.value
              }
            })
          }
          return
        }
        this.$Message.error(res.errmsg)
      })
    },
    getCityData (level, id) {
      selectCityList({ parent_id: id }).then(res => {
        if (res.data.errcode === 0) {
          this.areaData['list' + level] = res.data.data
          return
        }
        this.$Message.error(res.errmsg)
      })
    },
    resert () {
      this.searchInfo.logType = ''
      this.searchInfo.eventCode = ''
      this.searchInfo.info = ''
      this.searchInfo.eventTypeId = ''
      this.searchInfo.isResolve = ''
      this.searchInfo.isSatisfaction = ''
      this.searchInfo.cityId = ''
      this.searchInfo.areaId = ''
      this.searchInfo.streetId = ''
      this.searchInfo.communityId = ''
      this.searchInfo.gardenId = ''
      this.searchInfo.isEarlyWarning = ''
      this.searchInfo.eventUserName = ''
      this.searchInfo.eventCardno = ''
      this.searchInfo.eventTel = ''
      this.searchInfo.occurrenceTimeStart = ''
      this.searchInfo.occurrenceTimeEnd = ''
      this.searchInfo.resolveTimeStart = ''
      this.searchInfo.resolveTimeEnd = ''
      this.searchInfo.createTimeStart = ''
      this.searchInfo.createTimeEnd = ''
      this.searchInfo.is_involve_everyone = ''
      this.searchInfo.is_involve_everyone_count = ''
      this.searchInfo.resolveWay = ''
      // this.searchInfo.status = ''
      this.params.pageNo = 1
      this.params.pageSize = 10
      this.searchData()
    },
    changeDispute (item) {
      if (!item) {
        return
      }

      this.searchInfo.eventCategoryId = JSON.parse(item).value
      this.getDictList('2', JSON.parse(item).id)
    },
    changeArea (level, parent_id) {
      if (level > 1 && !parent_id) {
        this.areaData['list' + level] = []
        let list = ['', 'cityId', 'areaId', 'streetId', 'communityId']
        for (let i = level; i < list.length; i++) {
          this.$set(this.searchInfo, list[i], '')
        }
        return
      }
      this.getCityData(level, parent_id)
    },
    getList (item) {
      if (item) {
        this.params = Object.assign(this.params, item)
        if (this.params.occurrenceTimeStart) {
          this.params.occurrenceTimeStart = datetime2str(this.params.occurrenceTimeStart)
        }
        if (this.params.occurrenceTimeEnd) {
          this.params.occurrenceTimeEnd = datetime2str(this.params.occurrenceTimeEnd)
        }
        if (this.params.resolveTimeStart) {
          this.params.resolveTimeStart = datetime2str(this.params.resolveTimeStart)
        }
        if (this.params.resolveTimeEnd) {
          this.params.resolveTimeEnd = datetime2str(this.params.resolveTimeEnd)
        }
        if (this.params.createTimeStart) {
          this.params.createTimeStart = datetime2str(this.params.createTimeStart)
        }
        if (this.params.createTimeEnd) {
          this.params.createTimeEnd = datetime2str(this.params.createTimeEnd)
        }
      }
      findEarlyWarningStatusList(this.params).then(res => {
        if (res.data.errcode === 0) {
          this.dataList = res.data.data.results
          // TODO 测试用
          this.dataList.map((item, index) => {
            // 判断index是奇数还是偶数
            if (index % 2 === 0) {
              // item.col1 = false
              item.col2 = 1
            } else {
              // item.col1 = true
              item.col2 = 2
            }
          })
          this.params.totalRecord = res.data.data.totalRecord
        }
      })
    },
    size (pageSize) {
      this.params.pageSize = pageSize
      this.changePageNo()
    },
    changePageNo (pageNo) {
      this.params.pageNo = pageNo
      this.getList(this.params)
    },
    searchData () {
      this.params.pageNo = 1 // 重置页码为1
      this.getList(this.searchInfo)
    },
    getInfo (row, level) { // 详情接口
      this.$router.push({
        name: 'contradictionRegisterAdd',
        params: {
          what: 'edit',
          id: row.id,
          level: level,
          type: this.type,
          isShowInfo: true, // 控制化解过程显隐
          isInfo: true
        }
      })
    },
    disposeView (item) { // 处置意见
      this.czModal = true
      this.czFormData = {}
      this.id = item.id
      this.getCzList()
    },
    saveCzYj () {
      this.$refs.czFormDataRef.validate((valid) => {
        if (valid) {
          insertEventOpinion({ eventId: this.id, opinion: this.czFormData.opinion }).then(res => {
            if (res.data.errcode === 0) {
              this.$Message.success('操作成功')
              this.getCzList()
              return
            }
            this.$Message.error(res.data.errmsg)
          })
        } else {
          console.log('表单校验失败，不能提交!')
        }
      })
    },
    getColumns () {
      if (this.company_grade < 6) {
        this.columns2.push({
          title: '操作',
          slot: 'action',
          align: 'center'
        })
      }
    },
    getCzList () {
      selectOpinionList({ eventId: this.id }).then(res => {
        if (res.data.errcode === 0) {
          this.dataList2 = res.data.data
          this.dataList2.forEach(element => {
            element.disabled = true
            element.buttonText = '修改'
          })
          console.log(this.dataList2)
          return
        }
        this.$Message.error(res.data.errmsg)
      })
    },
    editCzYj (item) {
      item.disabled = !item.disabled
      item.buttonText = item.disabled === true ? '修改' : '确定'
      console.log(item.disabled)
      if (item.disabled === true) {
        updateEventOpinion({ id: item.id, opinion: item.opinion }).then(res => {
          if (res.data.errcode === 0) {
            this.$Message.success('操作成功')
            this.getCzList()
            return
          }
          this.$Message.error(res.data.errmsg)
        })
      }
    }
  },
  computed: {
    company_grade () {
      return this.$store.state.user.severUserInfo.company_grade
    },
    name () {
      return this.$store.state.user.severUserInfo.name
    }
  }
}
</script>
<style scoped lang="less">
.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;
}

.mt8 {
  margin-top: 8px;
}

.mr15 {
  margin-right: 15px;
}

.mr5 {
  margin-right: 5px;
}

.page_style {
  margin-top: 10px;
  text-align: right;
}

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

.circle-div1 {
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: green;
}

.circle-div2 {
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: orange;
}

.circle-div3 {
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: red;
}

.show-more {
  margin-top: 5px;
  cursor: pointer;
}

/deep/ .ivu-input[disabled] {
  color: #515a6e;
}

/deep/ .ivu-form-label-top .ivu-form-item-label {
  font-size: 16px;;
}

.level-option-img {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin-bottom: 3px;
}
</style>
