<template>
  <div>
    <van-nav-bar title="积分分类" left-text="返回" left-arrow class="headerbar no-down-icon">
      <template slot="right" class="department_right_nav">
        <van-dropdown-menu duration="0.3" text="text" class="head_dropdown_menu" v-if="this.getRole_noe">
          <van-dropdown-item title="+" @change="plus_menu" :options="options" />
        </van-dropdown-menu>
      </template>

      <template slot="left" v-if="pid > 0">
        <div @click="back">
          <van-icon name="arrow-left" /><span class="van-nav-bar__text">返回</span>
        </div>
      </template>
      <template slot="left" v-if="pid == 0">
        <div @click="$route_back">
          <van-icon name="arrow-left" /><span class="van-nav-bar__text">返回</span>
        </div>
      </template>

    </van-nav-bar>
    <van-search v-model="keyword" placeholder="请输入分类名称或规则内容" />
    <div class="dept_path" v-show="pid_list_arr.length > 0">
      <a href="javascript:void(0);" @click="back_by_index(0)">全部</a>
      <a v-for="(item, index) in pid_list_arr" :key="index" href="javascript:void(0);" @click="back_by_index(index + 1)"> <van-icon name="arrow" /> {{item.name}}</a>
    </div>
    <div class="body_com" :class="{show_dept_path:pid_list_arr.length > 0}">

      <scroller ref="scroller" :on-refresh="get_department_list">

        <van-cell-group v-if="pid > 0 && keyword == ''">
        <van-cell :title="pid_list_arr[pid_list_arr.length - 1].name" class="employee_cell" @click="edit_cate">
          <template slot="icon">
            <img src="static/images/e66f.jpg" class="employee_cell_head_img"/>
          </template>

          <van-icon v-if="!select_mode && this.getRole_noe" name="edit" slot="right-icon" />
          <template v-else slot="right-icon"><span></span></template>

        </van-cell></van-cell-group>

        <van-cell-group>

        <van-cell :is-link="!select_mode" v-for="(item,index) in rule_category_list" v-if="pid == item.pid" v-show="item.name.indexOf(keyword) >= 0" :key="index" :title="item.name" class="employee_cell" @click="dept_click(item)">
          <template slot="icon">
            <van-checkbox v-model="item.checked" v-if="select_mode"></van-checkbox>
          </template>
        </van-cell>
        </van-cell-group>
          <van-cell-group v-for="(item,index) in list" :key="index" v-show="item.remark.indexOf(keyword) >= 0">
            <van-cell :title="item.remark" class="employee_cell rule_list_item" @click="employee_click(item)" >
              <template slot="label">
                <div v-show="item.cycle_type == 2"><van-tag size="medium" plain>自动规则</van-tag></div>
                <span class="record color_red" v-if="item.min_point < 0">{{(item.range_type == 1 ? item.min_point : item.min_point+'～'+item.max_point)}}</span>
                <span class="record color_green" v-if="item.min_point >= 0">+ {{(item.range_type == 1 ? item.min_point : item.min_point+'～'+item.max_point)}}</span>
                <span class="type">{{types_list[item.pt_id]}}</span>
                <span class="fr">{{get_cate_name(item.rule_id)}}</span>
              </template>

            </van-cell>

        </van-cell-group>

        <van-empty description="暂无内容" v-show="list != null && rule_category_list != null && list.length == 0 && rule_category_list.length == 0" />

      </scroller>
    </div>
    <van-row class="bottom_menu" v-if="!select_mode && pid > 0">
      <van-col span="8"><a href="javascript:void(0);" @click="add_employee">添加规则</a></van-col>
      <van-col span="8"><a href="javascript:void(0);" @click="show_add_dept">添加子分类</a></van-col>
      <van-col span="8"><a href="javascript:void(0);" @click="actions_show=true">更多管理</a></van-col>
    </van-row>
    <van-row class="bottom_menu" v-if="!select_mode && pid == 0">
      <van-col span="24"><a href="javascript:void(0);" @click="show_add_dept">添加分类</a></van-col>
    </van-row>
    <div class="bottom_menu1" v-if="select_mode">
      <div class="selected_box">
        <ul :style="'width:'+selected_box_width">
          <li v-for="(item,index) in employee_selected_list" :key="index"><img @click="employee_cancel(item)" :src="item.avatar"/><div class="name_mini">{{item.name}}</div></li>
          <li v-for="(item,index) in dept_selected_list" :key="index"><img @click="dept_cancel(item)" :src="item.avatar"/><div class="name_mini">{{item.name}}</div></li>
        </ul>
      </div>
      <div class="selected_btn"><van-button style="height: 0.7rem; line-height: 0.7rem; margin-top:0.1rem;" type="primary" @click="move_to">移动到</van-button></div>
    </div>

    <van-dialog
      v-model="add_dept_show"
      :title="dialog_title"
      show-cancel-button
      @confirm="submit_add_dept"
    >
      <div style="padding:0.32rem; width:auto;">
        <input type="text" id="dept_add_input" class="diy-input" style="width:100%; padding:0; height: 0.5rem; text-indent: 0.5em; box-shadow: none;" v-model="dept_formdata.name" />
      </div>

    </van-dialog>

    <van-dialog
      v-model="edit_dept_show"
      title="修改分类名称"
      show-cancel-button
      @confirm="submit_edit_dept"
    >
      <div style="padding:0.32rem; width:auto;">
        <input type="text" id="dept_edit_input" class="diy-input" style="width:100%; padding:0; height: 0.5rem; text-indent: 0.5em; box-shadow: none;" v-model="edit_dept_name" />
      </div>

    </van-dialog>

    <van-action-sheet :round="false" v-model="actions_show" :actions="actions" @select="actions_select" />

    <EmployeeSelector :can_select_employee="false" :can_select_dept="true" :dept_multi="false" @confirm="move_confirm" :visible.sync="show_dept_selector" @cancel="move_cancel"></EmployeeSelector>

    <EmployeeSelector :can_select_employee="true" :can_select_dept="false" :dept_multi="false" @confirm="set_manager" :visible.sync="show_employee_selector"></EmployeeSelector>

    <van-popup v-cloak class="guild_notice" v-model="showHelp" :close-on-click-overlay="false">
      <div class="guild_dept_border">+</div>
      <div class="guild_down_icon"></div>
      <van-cell class="list" title-class="title" title="添加积分规则">
        <template slot="default">
          <span class="num">5 / 5</span>
          <van-button class="next" type="info" @click="nextHelp" round size="small">完成</van-button>
        </template>
        <template slot="label">
          <span class="des">添加分类和规则</span>
        </template>
      </van-cell>
    </van-popup>
  </div>
</template>

<script>
import Vue from 'vue'
import { ActionSheet, Checkbox, DropdownMenu, DropdownItem, Tag} from 'vant'
import EmployeeSelector from '@/components/common/EmployeeSelector'
import request from '@/utils/request'
import {getRole_noe} from '@/utils/auth'
Vue.use(ActionSheet).use(Checkbox).use(DropdownMenu).use(DropdownItem).use(Tag)
export default {
  name: 'rule_category',
  components: {
    EmployeeSelector
  },
  data () {
    const manage_scope = this.$store.getters.user_info.employee_detail.manage_scope
    return {
      getRole_noe: '', // 权限判断
      options: [],
      types_list: {},
      show_employee_selector: false,
      select_mode: false,
      show_dept_selector: false,
      edit_dept_show: false,
      add_dept_show: false,
      dept_formdata: {
        name: '',
        pid: 0
      },
      manage_scope: manage_scope,
      company_info: {},
      actions_show: false,
      actions: [
        { name: '修改当前分类名称', action: 'edit'},
        { name: '删除分类', action: 'delete'},
        { name: '取消', action: 'cancel' }
      ],
      edit_dept_name: '',
      dept_name: '积分分类',
      dialog_title: '添加分类',
      dept_id: 0,
      dept_pid: 0,
      list: null,
      dept_list: [],
      keyword: '',
      owner_id: 0,
      user_info: this.$store.getters.user_info,
      employee_selected_list: [],
      dept_selected_list: [],
      employee_selected: [],
      dept_selected: [],
      selected_box_width: '0',
      rule_category_list: null,
      pid: 0,
      pid_list: [],
      pid_list_arr: [],
      item_list: [],
      cur_item_list: [],
      showHelp: false
    }
  },
  watch: {
    pid (val) {
      if (val == 0) {
        this.dept_id = 0
        this.dialog_title = '添加分类'
        this.list = []
        for (let i in this.item_list) {
          for (let k in this.item_list[i]) {
            this.list.push(this.item_list[i][k])
          }
        }
      } else {
        this.rule_category_list = []
        this.parse_tree(this.dept_list, val)
        this.list = this.cur_item_list
        this.dialog_title = '添加子分类'
      }
    },
    employee_selected_list () {
      let l = this.employee_selected_list.length + this.dept_selected_list.length
      let width = 0.9 * l
      this.selected_box_width = width + 'rem'
    },
    dept_selected_list () {
      let l = this.employee_selected_list.length + this.dept_selected_list.length
      let width = 0.9 * l
      this.selected_box_width = width + 'rem'
    },
    keyword () {

    }
  },
  methods: {
    get_cate_name (rule_id) {
      let cate = this.rule_category_list.find(o => { return o.id == rule_id })
      if (cate) {
        return cate.name
      } else {
        return ''
      }
    },
    get_item_list (trees) {
      if (this.item_list['rule_' + trees.id]) {
        for (let i in this.item_list['rule_' + trees.id]) {
          this.cur_item_list.push(this.item_list['rule_' + trees.id][i])
        }
      }
      for (let i in trees.child) {
        this.get_item_list(trees.child[i])
      }
    },
    edit_cate () {
      if (!this.getRole_noe) {
        return false
      }
      let query = {rule_id: this.pid_list_arr[this.pid_list_arr.length - 1].id, rule_name: this.pid_list_arr[this.pid_list_arr.length - 1].name}
      if (this.pid_list_arr.length > 1) {
        query['pid'] = this.pid_list_arr[this.pid_list_arr.length - 2].id
        query['pname'] = this.pid_list_arr[this.pid_list_arr.length - 2].name
      } else {
        query['pid'] = 0
        query['pname'] = ''
      }
      this.$router.push({name: 'rule_category_edit', query: query})
    },
    back () {
      this.back_by_index(this.pid_list_arr.length - 1)
    },
    parse_tree (trees, rule_id) {
      for (let i in trees) {
        if (rule_id == trees[i].id) {
          this.cur_item_list = []
          this.get_item_list(trees[i])
        }
        this.rule_category_list.push(trees[i])
        this.parse_tree(trees[i].child, rule_id)
      }
    },
    set_manager (dat) {
      // 设置上级，这里请求接口
    },
    move_to () {
      this.show_dept_selector = true
    },
    plus_menu (val) {
      switch (val) {
        case 'add_cate_btn':
          this.$router.push({name: 'rule_category_add', query: {rule_id: this.dept_id, rule_name: this.dept_name}})
          break
        case 'add_rule':
          this.$router.push({name: 'rule_item_add', query: {rule_name: this.dept_name, rule_id: this.dept_id}})
          break
      }
    },
    move_cancel () {
      this.select_mode = false
      this.employee_selected_list = []
      this.dept_selected_list = []
      this.employee_selected = []
      this.dept_selected = []
    },
    move_confirm (data) {
      // 移动成员，这里请求接口

      let self = this
      request('post', '/addons/ems/employee/move_employee_and_dept', {pid: data.dept.length > 0 ? data.dept[0].id : 0, employee_ids: this.employee_selected.toString(), dept_ids: this.dept_selected.toString()}).then((res) => {
        if (res.data.code == 1) {
          self.get_user_list(function () {

          })
          self.$toast(res.data.msg)
        } else {
          self.$toast(res.data.msg)
        }
      }).catch((error) => {

      })
      this.select_mode = false
      this.employee_selected_list = []
      this.dept_selected_list = []
      this.employee_selected = []
      this.dept_selected = []
    },
    cancel_select () {
      this.select_mode = false
    },
    employee_cancel (item) {
      this.employee_selected.splice(this.employee_selected.indexOf(item.id), 1)
      let delete_index = -1
      for (let i in this.employee_selected_list) {
        if (this.employee_selected.indexOf(this.employee_selected_list[i].id) < 0) {
          delete_index = i
        }
      }
      if (delete_index >= 0) {
        this.employee_selected_list.splice(delete_index, 1)
        for (let i in this.list) {
          if (this.list[i].id == item.id) {
            this.$set(this.list[i], 'checked', false)
          }
        }
      }
    },
    dept_cancel (item) {
      this.dept_selected.splice(this.dept_selected.indexOf(item.id), 1)
      let delete_index = -1
      for (let i in this.dept_selected_list) {
        if (this.dept_selected.indexOf(this.dept_selected_list[i].id) < 0) {
          delete_index = i
        }
      }
      if (delete_index >= 0) {
        this.dept_selected_list.splice(delete_index, 1)
        for (let i in this.dept_list) {
          if (this.dept_list[i].id == item.id) {
            this.$set(this.dept_list[i], 'checked', false)
          }
        }
      }
    },
    select_employee (item) {
      if (item.checked) {
        item.checked = false
        this.employee_cancel(item)
      } else {
        this.employee_selected.push(item.id)
        this.employee_selected_list.push({id: item.id, name: item.name, avatar: item.avatar})
        item.checked = true
      }
    },
    select_dept (item) {
      if (item.checked) {
        item.checked = false
        this.dept_cancel(item)
      } else {
        this.dept_selected.push(item.id)
        this.dept_selected_list.push({id: item.id, name: item.name, avatar: 'static/images/e66f.jpg'})
        item.checked = true
      }
    },
    employee_click (item) {
      if (!this.getRole_noe) {
        // this.$toast('没有权限')
        return false
      }

      if (this.select_mode) {
        // 选择
        this.select_employee(item)
      } else {
        localStorage.setItem('rule_' + item.id, JSON.stringify(item))
        let dept_name = ''
        let rule_id = ''
        for (let i in this.rule_category_list) {
          if (item.rule_id == this.rule_category_list[i].id) {
            dept_name = this.rule_category_list[i].name
            rule_id = this.rule_category_list[i].id
          }
        }
        this.$router.push({name: 'rule_item_edit', query: {id: item.id, rule_name: dept_name, rule_id: rule_id}})
      }
    },
    show_child (item) {
      this.pid_list.push(this.pid)
      this.pid_list_arr.push(item)
      this.pid = item.id
      let item1 = JSON.parse(JSON.stringify(item))
      this.dept_name = item1.name
      this.dept_id = item1.id
      this.dept_pid = item1.pid
    },
    dept_click (item) {
      //scroller回到顶部
      this.$refs.scroller.scrollTo(0,0)

      if (this.select_mode) {
        // 选择
        this.select_dept(item)
      } else {
        this.show_child(item)
      }
    },
    add_employee () {
      this.$router.push({name: 'rule_item_add', query: {rule_id: this.dept_id}})
    },
    submit_edit_dept () {
      let self = this
      request('put', '/api/integral/rule', {name: this.edit_dept_name, rule_id: this.dept_id, pid: this.dept_pid}).then((res) => {
        if (res.data.code == 1) {
          self.$toast(res.data.msg)
        } else {
          self.$toast(res.data.msg)
        }
      }).catch((error) => {

      })
    },
    show_add_dept () {
      this.add_dept_show = true
      this.dept_formdata.name = ''
      this.$nextTick(() => {
        setTimeout(() => {
          document.getElementById('dept_add_input').classList.add('focus_hidden_input')
          document.getElementById('dept_add_input').focus()
          document.getElementById('dept_add_input').classList.remove('focus_hidden_input')
        }, 200)
      })
    },
    actions_select (item, index) {
      if (item.action == 'edit') {
        this.dept_formdata.id = this.pid
        this.edit_dept_show = true
        this.edit_dept_name = JSON.parse(JSON.stringify(this.dept_name))
        this.$nextTick(() => {
          setTimeout(() => {
            document.getElementById('dept_edit_input').classList.add('focus_hidden_input')
            document.getElementById('dept_edit_input').focus()
            document.getElementById('dept_edit_input').classList.remove('focus_hidden_input')
          }, 200)
        })
        // 修改部门名称
      }
      if (item.action == 'delete') {
        this.$dialog.confirm({
          title: '删除分类',
          message: '确定要删除当前分类吗？'
        }).then(() => {
          this.del_dept()
        }).catch(() => {
          // on cancel
        })
      }

      if (item.action == 'move_employee') {
        this.select_mode = true
      }
      if (item.action == 'set_manager') {
        this.show_employee_selector = true
      }
      this.actions_show = false
    },
    del_dept () {
      request('delete', '/api/integral/rule', {rule_id: this.dept_id}).then((res) => {
        if (res.data.code == 1) {
          this.$toast(res.data.msg)
          this.back()
        } else {
          this.$toast(res.data.msg)
        }
      })
    },
    submit_add_dept () {
      let self = this
      this.dept_formdata.pid = this.pid
      request('post', '/api/integral/rule', this.dept_formdata).then((res) => {
        if (res.data.code == 1) {
          self.get_department_list(function () {

          })
          self.$toast(res.data.msg)
        } else {
          self.$toast(res.data.msg)
        }
      }).catch((error) => {

      })
    },
    get_department_list (done) {
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true
      })
      request('get', '/api/integral/rule/trees').then((res) => {
        this.dept_list = res.data.data.rule_tree
        this.rule_category_list = []
        this.item_list = res.data.data.item_list
        this.parse_tree(this.dept_list, this.pid)
        if (this.pid > 0) {
          this.list = this.cur_item_list
        } else {
          this.list = []
          for (let i in this.item_list) {
            for (let k in this.item_list[i]) {
              this.list.push(this.item_list[i][k])
            }
          }
        }

        this.$toast.clear()
        done()
      }).catch((e) => {
        done()
      })
    },
    back_by_index (index) {
      if (index == this.pid_list.length) {
        return false
      }
      this.pid = this.pid_list[index]
      this.pid_list.splice(index, 100)
      this.pid_list_arr.splice(index, 100)
      this.get_department_list(function () {

      })
    },
    get_join_review_list () {},
    get_user_list (done) {
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true
      })
      request('get', '/addons/ems/employee/get_dept_list', {pid: this.dept_formdata.pid, keyword: this.keyword}).then((res) => {
        for (let i in res.data.data.employee_list) {
          res.data.data.employee_list[i]['checked'] = false
        }
        for (let i in res.data.data.dept_list) {
          res.data.data.dept_list[i]['checked'] = false
        }
        this.list = res.data.data.employee_list
        this.dept_list = res.data.data.dept_list
        this.owner_id = res.data.data.owner_id
        this.company_info = res.data.data.company_info

        done()
        this.$toast.clear()
      }).catch((e) => {
        done()
        this.$toast.clear()
      })
    },
    get_point_types () {
      let self = this
      for (let i in this.$store.getters.point_types) {
        self.types_list[this.$store.getters.point_types[i].id] = this.$store.getters.point_types[i].name
      }
    },
    nextHelp () {
      this.showHelp = false
      window.plus ? plus.storage.setItem('hasRule', '1') : localStorage.setItem('hasRule', '1')
    }
  },
  created () {
    this.getRole_noe = getRole_noe()
    if (this.$route.query.pid) {
      this.dept_formdata.pid = this.$route.query.pid
    }
    this.get_point_types()
    // this.get_department_list(function () })
    this.options = [
      { text: '添加分类', value: 'add_cate_btn', icon: 'cluster-o'},
      { text: '添加规则', value: 'add_rule', icon: 'friends-o'}
    ]
  },
  mounted () {
    this.$nextTick(() => {
      if ((window.plus ? plus.storage.getItem('hasRule') : localStorage.getItem('hasRule')) == 0) {
        this.showHelp = true
      }
    })
  },
  // 使用缓存更新方法局部更新
  keep_alive_update: {
    delete_cate_info: function (vm, data) {
      vm.back()
    },
    update_item_info: function (vm, data) {
      let list = []
      for (let i in vm.item_list) {
        for (let k in vm.item_list[i]) {
          if (data.id == vm.item_list[i][k].id) {
            vm.item_list[i][k] = data
          }
          list.push(vm.item_list[i][k])
        }
      }
      if (vm.pid > 0) {
        vm.rule_category_list = []
        vm.parse_tree(vm.dept_list, vm.pid)
        vm.list = vm.cur_item_list
      } else {
        vm.list = list
      }

      vm.$forceUpdate()
    },
    delete_item_info: function (vm, data) {
      let list = []
      let del_i = -1
      let del_k = -1
      for (let i in vm.item_list) {
        for (let k in vm.item_list[i]) {
          if (data.id == vm.item_list[i][k].id) {
            del_i = i
            del_k = k
          } else {
            list.push(vm.item_list[i][k])
          }
        }
      }
      if (del_i > -1 && del_k > -1) {
        vm.item_list[del_i].splice(del_k, 1)
      }
      if (vm.pid > 0) {
        vm.rule_category_list = []
        vm.parse_tree(vm.dept_list, vm.pid)
        vm.list = vm.cur_item_list
      } else {
        vm.list = list
      }
      vm.$forceUpdate()
    },
    add_item_info: function (vm, data) {
      vm.get_department_list(function () {
        vm.$forceUpdate()
      })
    },
    update_rule_cate: function (vm, data) {
      vm.dept_id = data.rule_id
      vm.dept_name = data.name
      for (let i in vm.pid_list_arr) {
        if (vm.pid_list_arr[i].id == data.rule_id) {
          vm.pid_list_arr[i].name = data.name
        }
      }
      vm.$forceUpdate()
    }
  }
}
</script>

<style scoped>
  .employee_cell .van-checkbox{
    overflow: visible;
    margin-right:0.1rem;
  }
  .dept_path a{color:#238dfa;font-size:0.28rem;}
  .dept_path a:nth-last-child(1){
    color: #999;
  }
  .dept_path a *{vertical-align: middle;}
  .dept_path{height: 0.6rem; position: relative; font-size:0.32rem; line-height: 0.4rem; overflow-x: scroll; padding:0 0.32rem; background-color: #fff;}
  .dept_path:after{content: " "; bottom:0; left:0; right:0; background-color: #ccc; height: 1px; position: absolute; transform: scaleY(0.5)}
  .body_com{height: calc(100% - 2rem); position: relative;}
  .body_com.show_dept_path{height: calc(100% - 2.6rem);}
  .bottom_menu{
    height: 0.8rem; text-align: center; line-height: 0.8rem; position: relative; background-color: #fff;}
  .bottom_menu:before{content:" "; height: 1px;/*no*/  background-color: #eee;width:100%; top:0;left:0;position: absolute;}
  .bottom_menu a{color: #1989fa; font-size:0.32rem;}

  .employee_cell_head_img {
    width: 0.8rem;
    height: 0.8rem;
    -webkit-border-radius: 0.1rem;
    -moz-border-radius: 0.1rem;
    border-radius: 0.1rem;
    margin-right: 0.15rem;
  }

  .employee_cell {
    padding: 0.16rem 0.32rem;
  }

  .employee_cell .van-cell__title {
    line-height: 0.8rem;
  }
  .employee_cell .van-cell__right-icon{margin-top:0.2rem;}
  .employee_cell .van-icon{color:#d7d7d7; margin-top:0.2rem;}
  .employee_cell .van-icon:active{color:#238dfa;}

  .bottom_menu1{ width:100%; height: 0.9rem;}
  .selected_box,.selected_btn{vertical-align: top; text-align: left;}
  .selected_btn{width:1.8rem; text-align: center; float:right;}

  .selected_box{overflow-x: scroll; width:5.5rem; float:left;min-height: 0.5rem;}
  .selected_box ul,.selected_box li{margin:0; padding:0; text-align: left;}
  .selected_box li{display: block; text-align: left; float: left; position: relative;}
  .selected_box li img{width:0.8rem; vertical-align: top;
    height: 0.8rem; padding:0.05rem;
    -webkit-border-radius: 0.1rem;
    -moz-border-radius: 0.1rem;
    border-radius: 0.1rem;}
  .name_mini{font-size:0.2rem; position: absolute; bottom:0.05rem;left:0.05rem;right:0.05rem;padding:0.02rem 0; text-align: center; background-color: rgba(0,0,0,0.4); height: 0.2rem; color:#fff; line-height: 0.2rem;}

  /deep/ .body_com .van-hairline--top-bottom:after{border: none;}
  /deep/ .body_com .van-hairline-unset--top-bottom:after{border:none;}

  /deep/ .rule_list_item .van-cell__title{
    line-height: 1.5;
    font-weight: bold;
  }
  /deep/ .rule_list_item .van-cell__label{
     line-height: 1.5;
     font-weight: normal;
   }
  /deep/ .van-tag--medium{font-size:0.24rem;}
  .guild_notice{
  top:1.6rem;
  left: 4.3rem;
  width: 6rem;
  background: transparent;
  border-radius: 0.12rem;
  overflow-y: inherit;
}
.guild_notice .list{
  position: relative;
  padding: 0.2rem;
  background: #238dfa;
  border-radius: 0.12rem;
}
.title{
  font-size:0.32rem;
  line-height: 0.48rem;
  color:#ffffff;
}
.title:after{
  position: absolute;
  top: 0.825rem;
  content: ' ';
  width: 90%;
  border-bottom: 0.02rem #3798fb solid;
}
.num{
  display: block;
  font-size:0.32rem;
  line-height: 0.48rem;
  color:#ffffff;
}
.list .des{
  display:block;
  margin-top:0.4rem;
  font-size:0.36rem;
  font-weight:bold;
  color:#fff;
}
.list .next{
  margin-top: 0.3rem;
  color:#238dfa;
  background:#fff;
  border-radius:0.12rem;
}
.guild_notice .list:after{
  border:none;
}
.guild_down_icon{
  position: relative;
  top: 0.1vh;
  left: 72vw;
  content: ' ';
  width: 0;
  height: 0;
  border-left: 0.2rem solid transparent;
  border-right: 0.2rem solid transparent;
  border-top: 0.2rem solid #238dfa;
  transform: rotate(180deg);
}
.guild_dept_border{
  position: relative;
  text-align: center;
  top: 0vh;
  left: 69vw;
  width: 0.7rem;
  height: 0.7rem;
  margin-bottom: 2vh;
  font-size: 0.4rem;
  font-weight: bold;
  line-height: 0.7rem;
  color: #fff;
  border: 0.04rem #fff dashed;
  border-radius: 0.12rem;
}
</style>
