<template>
  <div class="app-container">
    <el-input
      v-model="searchParams.search_number"
      type="text"
      placeholder="订单号"
      style="width: 300px"
      @keyup.enter.native="
        searchParams.page_index = 1;
        getStudioOrder();
      "
    />
    <el-input
      v-model="searchParams.search_content"
      type="text"
      placeholder="订单所属"
      style="width: 300px"
      @keyup.enter.native="
        searchParams.page_index = 1;
        getStudioOrder();
      "
    />
    <el-select
      v-model="searchParams.status"
      style="width: 200px"
      placeholder="请选择订单状态"
      @change="
        searchParams.page_index = 1;
        getStudioOrder();
      "
    >
      <el-option
        v-for="item in status_list"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      />
    </el-select>
    <el-select
      v-model="searchParams.activity_id"
      style="width: 300px"
      @change="
        searchParams.page_index = 1;
        getStudioOrder();
      "
    >
      <el-option
        v-for="item in activitys"
        :key="item.id"
        :label="item.title"
        :value="item.id"
      />
    </el-select>
    <el-button
      type="primary"
      @click="
        searchParams.page_index = 1;
        getStudioOrder();
      "
    >
      搜索
    </el-button>
    <el-button type="primary" @click="toExportOrderMore">导出</el-button>
    <el-button
      type="primary"
      @click="dialogFormVisible = true"
    >导入</el-button>
    <div style="margin-top:10px">
      <el-button v-permit="0" :roles-permit="roles" type="primary" class="bg1" @click="machExamine(0)">订单审核</el-button>
      <el-button v-permit="1" :roles-permit="roles" type="primary" class="bg2" @click="machExamine(1)">财务审核</el-button>
      <el-button v-permit="2" :roles-permit="roles" type="primary" class="bg3" @click="machExamine(2)">发货审核</el-button>
      <!-- <el-button v-permit="3" :roles-permit="roles" type="primary" @click="showMergeOrder">合并订单</el-button> -->
    </div>
    <el-dialog title="导入工作室订单" :visible.sync="dialogFormVisible">
      <div class="upload-container">
        <!-- <el-button v-if="export_type === '0'" type="text" class="download" @click="exportTemp">物流模板</el-button> -->
        <el-button
          type="text"
          class="download"
          @click="exportOrderTemplate"
        >订单模板</el-button>
        <el-upload
          action=""
          :show-file-list="false"
          :http-request="handleImport"
        >
          <div>
            <div style="position: relative">
              <el-input v-model="import_name" type="text" class="input">
                <i slot="append" class="el-icon-upload2" />
              </el-input>
              <i class="block" />
            </div>
          </div>
        </el-upload>
      </div>
      <div class="upload-container">
        <el-button size="small" style="margin-right:10px" @click="resetImport">取消</el-button>
        <!-- <el-button v-if="export_type === '0'" size="small" type="primary" @click="importTemp">导入</el-button> -->
        <el-button size="small" type="primary" @click="importTempChaiDan">导入</el-button>
      </div>
    </el-dialog>
    <el-table
      border
      stripe
      :header-cell-style="{ background: '#f8fbfc' }"
      class="tableBorder"
      :data="list"
      style="margin-top: 20px"
      @selection-change="orderMulSelect"
    >
      <el-table-column
        type="selection"
        width="50"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column prop="order_num" label="订单号" width="210">
        <template slot-scope="{ row }">
          <el-button type="text" @click="getStudioOrderDetail(row.id)">{{ row.order_num }}</el-button>
          <br>
          <p v-if="row.order_type === 1" class="tag sub-tag">代下单</p>
          <p v-if="row.is_back === 1" class="tag return-tag">退回</p>
          <p v-if="row.is_merge === 1" class="tag sub-tag">合并</p><br>
        </template>
      </el-table-column>
      <el-table-column prop="created_at" align="center" label="下单时间" width="160" :show-overflow-tooltip="true" />
      <el-table-column label="所属政委" width="120" align="center">
        <template slot-scope="{ row: { get_user } }">
          {{ get_user && get_user.warea && get_user.warea.admin_name }}
        </template>
      </el-table-column>
      <el-table-column label="下单人姓名" align="center" width="150" :show-overflow-tooltip="true">
        <template slot-scope="{ row }">
          {{ row.get_user && row.get_user.nickname }}
        </template>
      </el-table-column>
      <el-table-column label="下单人手机号" align="center" width="120" :show-overflow-tooltip="true">
        <template slot-scope="{ row }">
          {{ row.get_user && row.get_user.mobile }}
        </template>
      </el-table-column>
      <el-table-column prop="status" align="center" label="订单状态" width="110" :show-overflow-tooltip="true">
        <template slot-scope="{ row: { is_deleted, status } }">
          <el-tag v-if="is_deleted === 1" type="info">已作废</el-tag>
          <el-tag v-else :color="orderStudio(status).color" style="color:#ffffff;">{{ orderStudio(status).name }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="total" label="数量" align="center" width="120" />
      <el-table-column prop="money" label="金额" align="center" width="120" />
      <el-table-column label="地址" align="center" width="240" :show-overflow-tooltip="true">
        <template slot-scope="{ row }">
          {{
            `${row.get_address.province || ""}${row.get_address.city || ""}${
              row.get_address.town || ""
            }${row.get_address.address || ""}`
          }}
        </template>
      </el-table-column>
      <el-table-column label="收件人姓名" align="center" width="120" :show-overflow-tooltip="true">
        <template slot-scope="{ row }">
          {{ row.get_address && row.get_address.username }}
        </template>
      </el-table-column>
      <el-table-column label="收件人手机号" align="center" width="120" :show-overflow-tooltip="true">
        <template slot-scope="{ row }">
          {{ row.get_address && row.get_address.mobile }}
        </template>
      </el-table-column>
      <!-- <el-table-column label="收件人手机号" align="center"  width="120" :show-overflow-tooltip="true">
        <template slot-scope="{ row }">
          {{ row.get_address && row.get_address.mobile }}
        </template>
      </el-table-column> -->
      <el-table-column prop="remark" label="备注" align="center" width="220" :show-overflow-tooltip="true" />
      <el-table-column label="操作" align="center" fixed="right">
        <template slot-scope="{ row }">
          <el-button
            type="text"
            @click="toExportOrderOne([row.id])"
          >导出</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :total="total"
      :limit="searchParams.page_size"
      :page="searchParams.page_index"
      @pagination="changePagination"
      @update:limit="changePagination"
    />
  </div>
</template>
<script>
import { activityList } from '@/api/giftB'
import { studioOrder, orderExport, sendOrder, machOrderAudit } from '@/api/studio/order'
import { orderStudio } from '@/filters/common'
const moduleList = {
  订单编号: '',
  下单时间: '',
  所属政委: '',
  寄件人: '大卫博士',
  联系方式: '4006867733',
  发件人详细地址: '河南省郑州市经开区',
  下单人昵称: '',
  下单人姓名: '',
  下单人手机号: '',
  收件人: '',
  电话: '',
  收件人省: '',
  收件人市: '',
  收件人区: '',
  收件人街道地址: '',
  L: '',
  XL: '',
  XXL: '',
  XXXL: '',
  女M: '',
  女L: '',
  女XL: '',
  女XXL: '',
  女XXXL: '',
  '5XL': '',
  数据求和: '',
  备注: '',
  赠品: '',
  快递单号: '',
  快递公司: '',
  快递公司代码: '',
  发货状态: ''
}

export default {
  data() {
    return {
      roles: this.$route.meta.buttonAuthList ? this.$route.meta.buttonAuthList : [],
      dialogFormVisible: false,
      activitys: [],
      status_list: [
        {
          id: '',
          name: '全部'
        },
        {
          id: -1,
          name: '已删除'
        },
        {
          id: 0,
          name: '订单未审核'
        },
        {
          id: 1,
          name: '财务未审核'
        },
        {
          id: 2,
          name: '未发货审核'
        },
        {
          id: 3,
          name: '未收货'
        },
        {
          id: 4,
          name: '已完成'
        }
        // {
        //   id: 5,
        //   name: '已驳回(客服)'
        // },
        // {
        //   id: 6,
        //   name: '已驳回(财务)'
        // },
        // {
        //   id: 7,
        //   name: '已驳回(物流)'
        // }
      ],
      searchParams: {
        page_index: 1,
        page_size: 20,
        activity_id: '',
        status: '',
        search_number: '',
        search_content: ''
      },
      chooseList: [],
      kefuNum: 0,
      caiwuNum: 0,
      wuliuNum: 0,
      list: [],
      import_name: '',
      import_file: null,
      total: 0,
      orderDetail: {
        list: [],
        vis: false
      },
      exportMulSelection: []
    }
  },
  mounted() {
    this.orderStudio = orderStudio
    this.activityList(this.getStudioOrder)
  },
  methods: {
    // 批量代理审核
    machExamine(type) {
      if (type === 0 && this.kefuNum === 0) {
        this.$message.error(`暂无符合客服订单待审核`)
      } else if (type === 1 && this.caiwuNum === 0) {
        this.$message.error(`暂无符合财务订单待审核`)
      } else if (type === 2 && this.wuliuNum === 0) {
        this.$message.error(`暂无符合物流订单待审核`)
      } else {
        let msg = ''
        if (type === 0) {
          msg = `当前有${this.kefuNum}个客服订单待审核`
        } else if (type === 1) {
          msg = `当前有${this.caiwuNum}个财务订单待审核`
        } else {
          msg = `当前有${this.wuliuNum}个发货订单待审核`
        }
        this.$confirm(msg, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loadingFull = true
          machOrderAudit({
            data: this.orderMulSelection,
            status: type
          }).then(res => {
            this.loadingFull = false
            if (res.code === 200) {
              if (!this.highSearchFlag) {
                this.getList()
              } else {
                this.submitExport()
              }
              this.resetMulSelect()
              this.$message.success('审核成功')
            } else {
              this.$message.error('审核失败')
            }
          }).catch(e => {
            this.loadingFull = false
          })
        })
      }
    },
    // 多选
    orderMulSelect(val) {
      this.caiwuNum = 0
      this.kefuNum = 0
      this.wuliuNum = 0
      this.chooseList = val
      this.exportMulSelection = val.map((item) => item.id)
      const arr = []
      val.filter(item => {
        return (item.is_deleted !== 1) && (item.status === 0 || item.status === 1 || item.status === 2)
      }).map(item => {
        arr.push(item.id)
        if (item.status === 0) {
          this.kefuNum += 1
        } else if (item.status === 1) {
          this.caiwuNum += 1
        } else {
          this.wuliuNum += 1
        }
      })
      this.orderMulSelection = arr
    },
    // 导出订单
    toExportOrderMore() {
      if (!this.exportMulSelection.length) {
        this.$message.error('导出订单请至少选择1个')
        return false
      }
      this.toExportOrderOne(this.exportMulSelection)
    },
    // 导出订单
    getExportModule() {
      const data = this.expressData
      const out = []
      for (const i in data) {
        const item = data[i]
        const info = item.data
        let a = 0
        let b = 0
        let c = 0
        let d = 0
        while (a < item['精装'].length) {
          const obj = Object.assign({}, moduleList)
          obj['订单编号'] = i
          obj['下单时间'] = info.created_at
          obj['所属政委'] = info.admin_name
          obj['下单人昵称'] = info.u_nickname
          obj['下单人姓名'] = info.u_name
          obj['下单人手机号'] = info.u_mobile
          obj['收件人'] = info.username
          obj['电话'] = info.mobile
          obj['收件人省'] = info.province
          obj['收件人市'] = info.city
          obj['收件人区'] = info.town
          obj['收件人街道地址'] = info.address
          obj['备注'] = info.remark
          obj['赠品'] = ''
          let num_all = 0
          if (item['精装'][a].sec_attr === '男女款') {
            const sex = item['精装'][a].size.split('-')[0]
            let size = item['精装'][a].size.split('-')[1]
            size = size === '3XL' ? 'XXXL' : size
            if (sex === '男款') {
              obj[size] = `${item['精装'][a].num}${item['精装'][a].main_attr}`
              num_all += item['精装'][a].num
            } else {
              obj[
                '女' + size
              ] = `${item['精装'][a].num}${item['精装'][a].main_attr}`
              num_all += item['精装'][a].num
            }
          } else {
            if (item['精装'][a].size === '3XL') {
              item['精装'][a].size = 'XXXL'
            }
            if (item['精装'][a].sec_attr === '男款') {
              obj[
                item['精装'][a].size
              ] = `${item['精装'][a].num}${item['精装'][a].main_attr}`
              num_all += item['精装'][a].num
            }
            if (item['精装'][a].sec_attr === '女款') {
              obj[
                '女' + item['精装'][a].size
              ] = `${item['精装'][a].num}${item['精装'][a].main_attr}`
              num_all += item['精装'][a].num
            }
          }
          obj['数据求和'] = num_all
          out.push(obj)
          a++
        }
        while (b < item['普通'].length) {
          const obj = Object.assign({}, moduleList)
          obj['订单编号'] = i
          obj['下单时间'] = info.created_at
          obj['所属政委'] = info.admin_name
          obj['下单人昵称'] = info.u_nickname
          obj['下单人姓名'] = info.u_name
          obj['下单人手机号'] = info.u_mobile
          obj['收件人'] = info.username
          obj['电话'] = info.mobile
          obj['收件人省'] = info.province
          obj['收件人市'] = info.city
          obj['收件人区'] = info.town
          obj['收件人街道地址'] = info.address
          obj['备注'] = info.remark
          obj['赠品'] = ''
          let num_all = 0
          if (item['普通'][b].sec_attr === '男女款') {
            const sex = item['普通'][b].size.split('-')[0]
            let size = item['普通'][b].size.split('-')[1]
            size = size === '3XL' ? 'XXXL' : size
            if (sex === '男款') {
              obj[size] = `${item['普通'][b].num}${item['普通'][b].main_attr}`
              num_all += item['普通'][b].num
            } else {
              obj[
                '女' + size
              ] = `${item['普通'][b].num}${item['普通'][b].main_attr}`
              num_all += item['普通'][b].num
            }
          } else {
            if (item['普通'][b].size === '3XL') {
              item['普通'][b].size = 'XXXL'
            }
            if (item['普通'][b].sec_attr === '男款') {
              obj[
                item['普通'][b].size
              ] = `${item['普通'][b].num}${item['普通'][b].main_attr}`
              num_all += item['普通'][b].num
            }
            if (item['普通'][b].sec_attr === '女款') {
              obj[
                '女' + item['普通'][b].size
              ] = `${item['普通'][b].num}${item['普通'][b].main_attr}`
              num_all += item['普通'][b].num
            }
          }
          obj['数据求和'] = num_all
          out.push(obj)
          b++
        }
        while (c < item['精装混合'].length) {
          const obj = Object.assign({}, moduleList)
          obj['订单编号'] = i
          obj['下单时间'] = info.created_at
          obj['所属政委'] = info.admin_name
          obj['下单人昵称'] = info.u_nickname
          obj['下单人姓名'] = info.u_name
          obj['下单人手机号'] = info.u_mobile
          obj['收件人'] = info.username
          obj['电话'] = info.mobile
          obj['收件人省'] = info.province
          obj['收件人市'] = info.city
          obj['收件人区'] = info.town
          obj['收件人街道地址'] = info.address
          obj['备注'] = info.remark
          obj['赠品'] = ''
          let num_all = 0
          for (let j = 0; j < item['精装混合'][c].length; j++) {
            if (item['精装混合'][c][j].sec_attr === '男女款') {
              const sex = item['精装混合'][c][j].size.split('-')[0]
              let size = item['精装混合'][c][j].size.split('-')[1]
              size = size === '3XL' ? 'XXXL' : size
              if (sex === '男款') {
                obj[
                  size
                ] += `${item['精装混合'][c][j].num}${item['精装混合'][c][j].main_attr}`
                num_all += item['精装混合'][c][j].num
              } else {
                obj[
                  '女' + size
                ] += `${item['精装混合'][c][j].num}${item['精装混合'][c][j].main_attr}`
                num_all += item['精装混合'][c][j].num
              }
            } else {
              if (item['精装混合'][c][j].size === '3XL') {
                if (item['精装混合'][c][j].sec_attr === '男款') {
                  obj[
                    'XXXL'
                  ] += `${item['精装混合'][c][j].num}${item['精装混合'][c][j].main_attr}`
                  num_all += item['精装混合'][c][j].num
                }
              } else {
                if (item['精装混合'][c][j].sec_attr === '男款') {
                  obj[
                    item['精装混合'][c][j].size
                  ] += `${item['精装混合'][c][j].num}${item['精装混合'][c][j].main_attr}`
                  num_all += item['精装混合'][c][j].num
                }
                if (item['精装混合'][c][j].sec_attr === '女款') {
                  obj[
                    '女' + item['精装混合'][c][j].size
                  ] += `${item['精装混合'][c][j].num}${item['精装混合'][c][j].main_attr}`
                  num_all += item['精装混合'][c][j].num
                }
              }
            }
          }
          obj['数据求和'] = num_all
          out.push(obj)
          c++
        }
        while (d < item['普通混合'].length) {
          const obj = Object.assign({}, moduleList)
          obj['订单编号'] = i
          obj['下单时间'] = info.created_at
          obj['所属政委'] = info.admin_name
          obj['下单人昵称'] = info.u_nickname
          obj['下单人姓名'] = info.u_name
          obj['下单人手机号'] = info.u_mobile
          obj['收件人'] = info.username
          obj['电话'] = info.mobile
          obj['收件人省'] = info.province
          obj['收件人市'] = info.city
          obj['收件人区'] = info.town
          obj['收件人街道地址'] = info.address
          obj['备注'] = info.remark
          obj['赠品'] = ''
          let num_all = 0
          for (let j = 0; j < item['普通混合'][d].length; j++) {
            if (item['普通混合'][d][j].sec_attr === '男女款') {
              const sex = item['普通混合'][d][j].size.split('-')[0]
              let size = item['普通混合'][d][j].size.split('-')[1]
              size = size === '3XL' ? 'XXXL' : size
              if (sex === '男款') {
                obj[
                  size
                ] += `${item['普通混合'][d][j].num}${item['普通混合'][d][j].main_attr}`
                num_all += item['普通混合'][d][j].num
              } else {
                obj[
                  '女' + size
                ] += `${item['普通混合'][d][j].num}${item['普通混合'][d][j].main_attr}`
                num_all += item['普通混合'][d][j].num
              }
            } else {
              if (item['普通混合'][d][j].size === '3XL') {
                if (item['普通混合'][d][j].sec_attr === '男款') {
                  obj[
                    'XXXL'
                  ] += `${item['普通混合'][d][j].num}${item['普通混合'][d][j].main_attr}`
                  num_all += item['普通混合'][d][j].num
                }
              } else {
                if (item['普通混合'][d][j].sec_attr === '男款') {
                  obj[
                    item['普通混合'][d][j].size
                  ] += `${item['普通混合'][d][j].num}${item['普通混合'][d][j].main_attr}`
                  num_all += item['普通混合'][d][j].num
                }
                if (item['普通混合'][d][j].sec_attr === '女款') {
                  obj[
                    '女' + item['普通混合'][d][j].size
                  ] += `${item['普通混合'][d][j].num}${item['普通混合'][d][j].main_attr}`
                  num_all += item['普通混合'][d][j].num
                }
              }
            }
          }
          obj['数据求和'] = num_all
          out.push(obj)
          d++
        }
      }
      return out
    },
    toExportOrderOne(id) {
      const loading = this.$loading()
      orderExport({ id })
        .then((res) => {
          loading.close()
          if (res.code === 200) {
            this.expressData = res.data
            const exportData = this.getExportModule()
            console.log(exportData)
            import('@/vendor/Export2Excel').then((excel) => {
              excel.export_json_to_excel({
                header: Object.keys(moduleList),
                data: exportData.map((listItem) =>
                  Object.keys(exportData[0]).map((j) => listItem[j])
                ),
                filename: `${new Date().toLocaleDateString()}快递单导出`,
                bookType: 'xlsx',
                isCSV: true
              })
            })
          } else {
            this.$message.error(res.message || '导出工作室订单失败')
          }
        })
        .catch((e) => {
          console.log(e)
          loading.close()
          this.$message.error('导出工作室订单失败')
        })
    },
    exportOrderTemplate() {
      // 工作室订单模板下载
      const header = [
        '订单编号',
        '下单时间',
        '所属政委',
        '寄件人',
        '联系方式',
        '发件人详细地址',
        '下单人昵称',
        '下单人姓名',
        '下单人手机号',
        '收件人',
        '电话',
        '收件人省',
        '收件人市',
        '收件人区',
        '收件人街道地址',
        'L',
        'XL',
        'XXL',
        'XXXL',
        '女M',
        '女L',
        '女XL',
        '女XXL',
        '女XXXL',
        '5XL',
        '数据求和',
        '备注',
        '赠品',
        '快递单号',
        '快递公司',
        '快递公司代码',
        '发货状态'
      ]
      import('@/vendor/Export2Excel').then((excel) => {
        excel.export_json_to_excel({
          header: header,
          data: '',
          filename: '工作室订单',
          bookType: 'xlsx'
        })
      })
    },
    importTempChaiDan() { // 导入
      if (!this.import_file) {
        this.$message.error('请上传导入文件')
        return false
      }
      const formdata = new FormData()
      console.log(this.import_file)
      formdata.append('file', this.import_file)
      console.log(this.import_file, 'formdata')
      this.loadingFull = true
      try {
        this.$request(sendOrder(formdata), () => {
          this.$message.success('上传成功')
        })
      } catch (e) {
        this.$message.error('导入失败')
      } finally {
        this.loadingFull = false
      }
    },
    // 重置导入
    resetImport() {
      this.import_name = ''
      this.import_file = null
      this.dialogFormVisible = false
    },
    handleImport(params) {
      const file = params.file
      console.log(file, 'file')
      if (!file) return
      this.import_name = file.name
      this.import_file = file
    },
    getStudioOrderDetail(id) {
      let info = ''
      info = this.roles
      localStorage.setItem('roles', JSON.stringify(info))
      // 详情
      this.$router.push({
        name: 'studioOrderDetail',
        params: { id }
      })
    },
    async activityList(cb) {
      // 活动
      const loading = this.$loading()
      await activityList()
        .then((res) => {
          loading.close()
          if (res.code === 200) {
            this.activitys = res.data
            res.data.map((item) => {
              if (item.is_ing === 1) {
                this.searchParams.activity_id = item.id
              }
            })
          }
          cb && cb()
        })
        .catch((e) => {
          loading.close()
          cb && cb()
        })
    },
    getStudioOrder() {
      // 订单
      const loading = this.$loading()
      studioOrder(this.searchParams)
        .then((res) => {
          loading.close()
          if (res.code === 200) {
            this.list = res.data.list
            this.total = res.data.total
          } else {
            this.$message.error(res.message || '获取订单列表失败')
          }
        })
        .catch(() => {
          loading.close()
          this.$message.error('获取订单列表失败')
        })
    },
    changePagination(data) {
      // 分页
      const { page, limit } = data
      this.searchParams.page_size = limit
      this.searchParams.page_index = page
      this.getStudioOrder()
    }
  }
}
</script>
<style  lang="scss" scoped>
.tag {
    padding: 2px;
    margin-right: 2px;
    font-size: 12px;
    line-height: 1;
    border-radius: 2px;
    font-family: simsun;
    color: #fff;
    display: inline;
    cursor: pointer;
  }

  .sub-tag {
    font-size: 12px;
    color: #00a7f2;
    border: 1px solid rgba(0,167,242,.4);
  }

  .return-tag {
    color: #8c7ee4;
    border: 1px solid rgba(140,123,231,.4);
    display: inline-block;
  }
/deep/ .bg1 {
      background: #F97547 !important;
      border-color: #F97547 !important;
    }

    /deep/ .bg2 {
      background: #13C19F !important;
      border-color: #13C19F !important;
    }

    /deep/ .bg3 {
      background: #FFAA1D !important;
      border-color: #FFAA1D !important;
    }
.upload-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;

  .download {
    width: 72px;
    text-align: right;
    margin-right: 12px;
  }

  .input {
    width: 400px;

    .el-input__inner {
      border: none !important;
    }
  }

  .block {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0;
    right: 0;
    z-index: 99;
    border: 1px solid #dcdfe6;
  }

  .block:hover {
    border-color: #409eff;
  }
}
</style>
