<template>
  <div id="search" @keypress.enter.prevent="commit()">
    <el-card class="box-card">
      <div slot="header" class="clearfix ">
        <span style="font-size:24px;padding-right:0px;color:#eff0dc">检索条件</span>
      </div>
      <el-form id="form" :inline="true" :model="search_form" class="demo-form-inline" label-width="100px" ref="search_form" :rules="search_form_rules">
        <el-row style="text-align:left">
          <el-col :span="6">
            <el-form-item label="合同编号" prop="contract_unid">
              <el-input style="width:217px" v-model="search_form.contract_unid"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="项目名称" prop="project_name__like">
              <el-input style="width:217px" v-model="search_form.project_name__like"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="客户名称" prop="customer_name__like">
              <el-input style="width:217px" v-model="search_form.customer_name__like"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="账款状态" prop="amount_state_unid">
              <el-select v-model="search_form.amount_state_unid" clearable>
                <el-option v-for="item in amount_state_unid_data" :key="item.code" :label="item.name" :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- hide -->
        <el-collapse-transition>
          <div id="hide" v-show="!hide_search_item">
            <el-row style="text-align:left">
              <el-col :span="6">
                <el-form-item label="合同状态" prop="contract_state">
                  <el-select v-model="search_form.contract_state" clearable>
                    <el-option v-for="item in contract_state_data" :key="item.code" :label="item.name" :value="item.code">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="所属年份" prop="year">
                  <el-select v-model="search_form.year" clearable>
                    <el-option v-for="n in year_list" :key="n" :label="n" :value="n">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="所属月份" prop="month">
                  <el-select v-model="search_form.month" clearable>
                    <el-option v-for="n in month_list" :key="n" :label="n" :value="n">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="6">
                <el-form-item label="合同性质" prop="contract_type">
                  <el-select v-model="search_form.contract_type" clearable>
                    <el-option v-for="item in contract_type_data" :key="item.code" :label="item.name" :value="item.code">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row style="text-align:left">
              <el-col :span="6">
                <el-form-item label="产品线类型" prop="product_line_type">
                  <el-select v-model="search_form.product_line_type" clearable>
                    <el-option v-for="item in product_line_type_data" :key="item.code" :label="item.name" :value="item.code">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="是否终验" prop="acceptance_type">
                  <el-select v-model="search_form.acceptance_type" clearable>
                    <el-option label="是" :value="1">
                    </el-option>
                    <el-option label="否" :value="0">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="是否归档" prop="is_archive">
                  <el-select v-model="search_form.is_archive" clearable>
                    <el-option label="是" value=true></el-option>
                    <el-option label="否" value=false></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="销售员" v-if="sales">
                  <el-input style="width:217px" :readonly="true" v-model="salesperson_name"></el-input>
                </el-form-item>
                <el-form-item label="销售员" prop="salesperson_name__like" v-if="!sales">
                  <el-input style="width:217px" v-model="search_form.salesperson_name__like"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row style="text-align:left">
              <el-col :span="6">
                <el-form-item label="确认收入金额" prop="confirm_income_amount">
                  <el-input style="width:217px" v-model="search_form.confirm_income_amount"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="质保周期(月)" prop="guarantee_period">
                  <el-select v-model="search_form.guarantee_period" clearable>
                    <el-option v-for="n in guarantee_period_list" :key="n" :label="n" :value="n"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6" style="text-align:left">
                <el-form-item label="省" prop="province">
                  <el-select style="width:217px" v-model="search_form.province" clearable placeholder="省" @change="get_cities()">
                    <el-option v-for="(item,index) in provinces" :key="index" :label="item.name" :value="item.province_unid">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6" style="text-align:left">
                <el-form-item label="市" prop="city">
                  <el-select style="width:217px" v-model="search_form.city" clearable placeholder="市" @change="get_counties()">
                    <el-option v-for="(item,index) in cities" :key="index" :label="item.name" :value="item.city_unid">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row style="text-align:left">
              <el-col :span="12">
                <el-form-item label="签订日期" prop="start_date">
                  <el-date-picker style="width:202px" v-model="search_form.start_date" type="date" placeholder="开始日期" value-format="yyyy-MM-dd">
                  </el-date-picker>
                </el-form-item>
                <el-form-item prop="end_date">
                  <el-date-picker style="width:202px" v-model="search_form.end_date" type="date" placeholder="结束日期" value-format="yyyy-MM-dd">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="逾期天数" prop="overdays_start_point">
                  <el-input v-model="search_form.overdays_start_point" placeholder="不填默认为0"></el-input>
                </el-form-item>
                <el-form-item prop="overdays_end_point">
                  <el-input v-model="search_form.overdays_end_point" placeholder="不填则无上限"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row style="text-align:left">
              <el-col :span="12">
                <el-form-item label="合同金额" prop="amount_start_point">
                  <el-input v-model="search_form.amount_start_point" placeholder="不填默认为0"></el-input>
                </el-form-item>
                <el-form-item prop="amount_end_point">
                  <el-input v-model="search_form.amount_end_point" placeholder="不填则无上限"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="应收账款余额" prop="leave_amount_start_point">
                  <el-input v-model="search_form.leave_amount_start_point" placeholder="不填默认为0"></el-input>
                </el-form-item>
                <el-form-item prop="leave_amount_end_point">
                  <el-input v-model="search_form.leave_amount_end_point" placeholder="不填则无上限"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-collapse-transition>
      </el-form>
      <el-row>
        <i :class="hide_icon" @click="display_more">{{hide_text}}</i>
      </el-row>
      <el-row>
        <el-button-group style="float:right">
          <el-button type="primary" @click="commit()" size="small">检索</el-button>
          <el-button type="primary" @click="reset()" size="small">重置</el-button>
        </el-button-group>
      </el-row>
    </el-card>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="font-size:24px;padding-right:0px;color:#eff0dc">检索结果</span>
      </div>
      <!-- test------------------------------------------------------------------------------------------------ -->

      <!-- default-expand-all ： 是否默认展开所有行 -->
      <el-table id="data_table" :data="list_data" style="width: 100%" row-key="contract_unid" border>
        <el-table-column type="expand">
          <template slot-scope="scope">
            <el-row type="flex" justify="space-around" style="text-align:left;padding-bottom:5px">
              <el-col :span="4">
                <span class="pre">暂停金额:</span>{{scope.row.stop_amount}}
              </el-col>
              <el-col :span="4">
                <span class="pre">坏账金额:</span>{{scope.row.bad_amount}}
              </el-col>
              <el-col :span="4">
                <span class="pre">豁免金额:</span>{{scope.row.exemptions_amount}}
              </el-col>
              <el-col :span="4">
                <span class="pre">抵扣金额:</span>{{scope.row.deduct_amount}}
              </el-col>
              <el-col :span="4">
                <span class="pre">累计已收款:</span>{{scope.row.total_reback_amount}}
              </el-col>
              <el-col :span="4">
                <span class="pre">验收款金额:</span>{{scope.row.acceptanc_pay}}
              </el-col>
            </el-row>
            <el-row type="flex" justify="space-around" style="text-align:left;padding-bottom:5px">
              <el-col :span="4">
                <span class="pre">合同余额:</span>{{scope.row.contract_remain}}
              </el-col>
              <el-col :span="4">
                <span class="pre">产品线类型:</span>{{scope.row.product_line_type_name}}
              </el-col>
              <el-col :span="4">
                <span class="pre">累计应收:</span>{{scope.row.total_receive_amount}}
              </el-col>
              <el-col :span="4">
                <span class="pre">应收账款余额:</span>{{scope.row.total_amount_remain}}
              </el-col>
              <el-col :span="4">
                <span class="pre">逾期天数:</span>{{scope.row.over_days}}
              </el-col>
              <el-col :span="4">
                <span class="pre">质保金额:</span>{{scope.row.mainten_pay_deliver}}
              </el-col>
            </el-row>
            <el-row type="flex" justify="space-around" style="text-align:left;padding-bottom:5px">
              <el-col :span="4">
                <span class="pre">预付款金额:</span>{{scope.row.advance_pay}}
              </el-col>
              <el-col :span="4">
                <span class="pre">预付款到期日:</span>{{scope.row.advance_pay_date}}
              </el-col>
              <el-col :span="4">
                <span class="pre">到货款金额:</span>{{scope.row.arrive_pay}}
              </el-col>
              <el-col :span="4">
                <span class="pre">发货日期:</span>{{scope.row.deliver_date}}
              </el-col>
              <el-col :span="4">
                <span class="pre">到货款到期日:</span>{{scope.row.arrive_pay_date}}
              </el-col>
              <el-col :span="4">
                <span class="pre">质保到期日:</span>{{scope.row.mainten_pay_deliver_date}}
              </el-col>
            </el-row>
            <el-row style="text-align:left;padding-bottom:5px">
              <span class="pre">备注:</span>{{scope.row.contract_note}}
            </el-row>
          </template>
        </el-table-column>

        <el-table-column label="合同编号" prop="contract_unid" min-width="9%" align="center">
        </el-table-column>
        <el-table-column label="项目名称" prop="project_name" min-width="11%" align="center">
        </el-table-column>
        <el-table-column label="客户名称" prop="customer_name" min-width="11%" align="center">
        </el-table-column>
        <el-table-column label="合同金额" prop="contract_amount" min-width="9%" align="center">
        </el-table-column>
        <el-table-column label="签订时间" prop="sign_date" min-width="8%" align="center">
        </el-table-column>
        <el-table-column label="验收款日期" prop="acceptanc_date" min-width="8%" align="center">
        </el-table-column>
        <el-table-column label="验收款到期日" prop="acceptanc_pay_date" min-width="8%" align="center">
        </el-table-column>
        <!-- <el-table-column label="产品线类型" prop="product_line_type_name" min-width="9%" align="center">
        </el-table-column> -->
        <el-table-column label="合同状态" prop="contract_state_name" min-width="9%" align="center">
        </el-table-column>
        <el-table-column label="销售员" prop="salesperson_name" min-width="7%" align="center">
        </el-table-column>
        <el-table-column label="省" prop="province_name" min-width="6%" align="center">
        </el-table-column>
        <el-table-column label="市" prop="city_name" min-width="6%" align="center">
        </el-table-column>
        <!-- <el-table-column label="县" prop="county_name" min-width="7%" align="center">
        </el-table-column> -->
        <el-table-column label="操作" min-width="4%" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="go_to(scope.row.contract_unid)">
              详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- test------------------------------------------------------------------------------------------------ -->
      <el-row style="padding-top:50px">
        <el-col :span="20">
          <el-pagination style="float:left" background layout="prev, pager, next" :total="total_data" :page-size="limit" prev-text="上一页" next-text="下一页" :current-page="current_page" @current-change="page_change">
          </el-pagination>
        </el-col>

        <el-col :span="4">
          <el-button-group style="float:right">
            <el-button type="primary" size="small" @click="export_contract">导出</el-button>
            <el-button type="primary" size="small" @click="import_click">导入</el-button>
            <input id="import_unview" type="file" style="display:none" @change="import_contract">
          </el-button-group>
        </el-col>

      </el-row>
    </el-card>
  </div>
</template>

<script>
  const twodecimalrule = {
    pattern: /((^[1-9]\d*)|^0)(\.\d{2})$/,
    message: "请输入数字并保留两位小数",
    trigger: "blur"
  };
  export default {
    name: "search",
    data() {
      return {
        hide_icon: "icon i-arrowdown-copy",
        hide_search_item: true,
        hide_text: "显示更多",
        sales: false,
        salesperson_name: null,
        provinces: [],
        cities: [],
        counties: [],
        code_base_url: this.$disparch_data.code_base_url,
        contract_base_url: this.$disparch_data.contract_base_url,
        month_list: [
          "01",
          "02",
          "03",
          "04",
          "05",
          "06",
          "07",
          "08",
          "09",
          "10",
          "11",
          "12"
        ],
        contract_state_data: [],
        contract_type_data: [],
        product_line_type_data: [],
        amount_state_unid_data: [],
        search_form: {
          contract_unid: null,
          salesperson_unid: null,
          salesperson_name__like: null,
          project_name__like: null,
          customer_name__like: null,
          guarantee_period: null,
          year: null,
          month: null,
          contract_state: null,
          contract_type: null,
          product_line_type: null,
          acceptance_type: null,
          is_archive: null,
          amount_state_unid: null,
          confirm_income_amount: null,
          province: null,
          city: null,
          // county: null,
          start_data: null,
          end_date: null,
          overdays_start_point: null,
          overdays_end_point: null,
          amount_start_point: null,
          amount_end_point: null,
          leave_amount_start_point: null,
          leave_amount_end_point: null
        },

        list_data: [],
        limit: 10,
        total_data: 0,
        current_page: 1,

        search_form_rules: {
          confirm_income_amount: twodecimalrule,
          amount_start_point: twodecimalrule,
          amount_end_point: twodecimalrule,
          leave_amount_start_point: twodecimalrule,
          leave_amount_end_point: twodecimalrule,
          overdays_start_point: {
            pattern: /((^[1-9]\d*)|^0)$/,
            message: "请输入正确天数",
            trigger: "blur"
          },
          overdays_end_point: {
            pattern: /((^[1-9]\d*)|^0)$/,
            message: "请输入正确天数",
            trigger: "blur"
          }
        }
      };
    },
    computed: {
      year_list: function() {
        var a = new Date().getFullYear();
        var arr = [];
        for (let i = a; i >= 2000; i--) {
          arr.push(i);
        }
        return arr;
      },
      offset() {
        return (this.current_page - 1) * this.limit;
      },
      guarantee_period_list() {
        var arr = [];
        var a = 6;
        for (let i = 0; i < 10; i++) {
          const element = (10)[i];
          arr.push(a);
          a += 6;
        }
        return arr;
      }
    },
    methods: {
      display_more() {
        this.hide_search_item = !this.hide_search_item;
        this.hide_search_item == true
          ? (this.hide_text = "显示更多")
          : (this.hide_text = "收起");
        this.hide_search_item == true
          ? (this.hide_icon = "icon i-arrowdown-copy")
          : (this.hide_icon = "icon i-arrowup");
      },

      import_click() {
        document.getElementById("import_unview").click();
      },
      import_contract() {
        if (!document.getElementById("import_unview").files[0]) {
          return;
        }
        var form = new FormData();
        form.append("file", document.getElementById("import_unview").files[0]);
        this.$Axios({
          method: "post",
          url: this.contract_base_url + "import",
          data: form
        })
          .then(res => {
            if (res.data.ecode == "500") {
              this.$message.error(res.data.enote);
            } else if (res.data.ecode == "200") {
              this.$message({
                type: "success",
                message: "导入成功"
              });
            } else if (res.data != [] && res.data[0].contract_unid) {
              var message = [];
              const h = this.$createElement;
              res.data.forEach(e => {
                message.push(h("p", null, e.contract_unid));
              });
              this.$message({
                type: "warning",
                message: "部分导入信息数据校验未通过,请检查后重新导入",
                duration: 5000
              });
              this.$notify({
                title: "校验未通过的合同的编号为：",
                duration: 0,
                message: h("p", null, message),
                type: "error"
              });
            } else {
              if (res.data.length > 0) {
                var message = [];
                const h = this.$createElement;
                res.data.forEach(e => {
                  message.push(h("p", null, e));
                });
                this.$message({
                  type: "warning",
                  message: "部分导入信息已存在,请检查后重新导入",
                  duration: 5000
                });
                this.$notify({
                  title: "重复的数据编号",
                  duration: 0,
                  message: h("p", null, message),
                  type: "error"
                });
              }
            }
            var node = document.getElementById("import_unview");
            node.value = "";
          })
          .catch(err => {
            console.log(err.message);
          });
      },
      // get start~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
      get_amount_state_unid_data() {
        this.$Axios({
          method: "get",
          url: this.code_base_url + "custom/cates/42407C5EF2/codes"
        })
          .then(res => {
            this.amount_state_unid_data = res.data.list_data;
          })
          .catch(err => {});
      },
      get_contract_type_data() {
        this.$Axios({
          method: "get",
          url: this.code_base_url + "custom/cates/8EC31D08A0/codes"
        })
          .then(res => {
            this.contract_type_data = res.data.list_data;
          })
          .catch(err => {});
      },
      get_contract_state_data() {
        this.$Axios({
          method: "get",
          url: this.code_base_url + "custom/cates/13BEFACBCF/codes"
        })
          .then(res => {
            this.contract_state_data = res.data.list_data;
          })
          .catch(err => {});
      },
      get_product_line_type_data() {
        this.$Axios({
          method: "get",
          url: this.code_base_url + "custom/cates/4FC51AD3C9/codes"
        })
          .then(res => {
            this.product_line_type_data = res.data.list_data;
          })
          .catch(err => {});
      },
      get_provinces() {
        this.$Axios({
          method: "get",
          url: this.code_base_url + "countries/0E229CD043/provinces"
        })
          .then(response => {
            this.provinces = response.data.list_data;
          })
          .catch(err => {
            console.log(err.message);
          });
      },
      get_cities() {
        this.search_form.city = "";
        // this.search_form.county = "";
        if (this.search_form.province) {
          this.$Axios({
            method: "get",
            url:
              this.code_base_url +
              "countries/0E229CD043/provinces/" +
              this.search_form.province +
              "/cities"
          })
            .then(response => {
              this.cities = response.data.list_data;
            })
            .catch(err => {
              console.log(err.message);
            });
        }
      },
      get_list_data() {
        var a = this.search_form;
        a.offset = this.offset;
        a.limit = this.limit;
        this.$Axios({
          methods: "get",
          url: this.contract_base_url,
          params: a,
          headers: { "Content-Type": "application/json" }
        })
          .then(response => {
            if (response.data.ecode == "500") {
              this.$message.error("筛选异常");
              return;
            }
            this.total_data = response.data.total_number;
            this.list_data = response.data.list_data;
            for (let i = 0; i < this.list_data.length; i++) {
              const e = this.list_data[i];
              for (let j = 0; j < this.contract_state_data.length; j++) {
                const a = this.contract_state_data[j];
                if (e.contract_state == a.code) {
                  this.list_data[i].contract_state_name = a.name;
                }
              }
              for (let k = 0; k < this.product_line_type_data.length; k++) {
                const b = this.product_line_type_data[k];
                if (e.product_line_type == b.code) {
                  this.list_data[i].product_line_type_name = b.name;
                }
              }
              if (!e.over_days) {
                e.over_days = 0;
              }
            }
          })
          .catch(err => {
            console.log(err.message);
          });
      },
      get_year(date) {
        if (date) {
          return date.slice(0, 4);
        }
      },
      get_month(date) {
        if (date) {
          return date.slice(5, 7);
        }
      },

      // get end---------------------------------------------------------------------------------------------
      reset() {
        this.$refs["search_form"].resetFields();
      },

      commit() {
        this.$refs["search_form"].validate(valid => {
          if (valid) {
            this.current_page = 1;
            sessionStorage.setItem(
              "search_condition",
              JSON.stringify(this.search_form)
            );
            this.get_list_data();
          } else {
            this.$message({
              type: "warning",
              message: "请检查数据格式是否正确"
            });
          }
        });
      },
      page_change(val) {
        this.search_form = JSON.parse(sessionStorage.getItem("search_condition"));
        this.current_page = val;
        console.log(this.current_page);
        this.get_list_data();
      },
      export_contract() {
        this.$Axios({
          method: "get",
          url: this.contract_base_url + "export",
          params: this.search_form,
          responseType: "blob"
        })
          .then(res => {
            let blob = new Blob([res.data], {
              type: "application/vnd.ms-excel;charset=UTF-8"
            });
            // let ourl = URL.createObjectURL(blob);
            // window.location.href = ourl;
            var downloadElement = document.createElement("a");
            var href = window.URL.createObjectURL(blob); //创建下载的链接
            downloadElement.href = href;
            downloadElement.download = "合同.xlsx"; //下载后文件名
            document.body.appendChild(downloadElement);
            downloadElement.click(); //点击下载
            document.body.removeChild(downloadElement); //下载完成移除元素
            window.URL.revokeObjectURL(href); //释放掉blob对象
          })
          .catch(err => {
            console.log(err.message);
          });
      },
      go_to(id) {
        sessionStorage.setItem("modify", "1");
        this.$router.push("/nav/contract/" + id);
      }
    },
    created() {
      if (sessionStorage.getItem("user_roles") == "null") {
        this.salesperson_name = sessionStorage.getItem("user_name");
        this.sales = true;
        this.search_form.salesperson_unid = sessionStorage.getItem("user_unid");
      }
      if (sessionStorage.getItem("provinces")) {
        this.provinces = JSON.parse(sessionStorage.getItem("provinces"));
      } else {
        this.get_provinces();
      }
      if (sessionStorage.getItem("amount_state_unid_data")) {
        this.amount_state_unid_data = JSON.parse(
          sessionStorage.getItem("amount_state_unid_data")
        );
      } else {
        this.get_amount_state_unid_data();
      }
      if (sessionStorage.getItem("contract_type_data")) {
        this.contract_type_data = JSON.parse(
          sessionStorage.getItem("contract_type_data")
        );
      } else {
        this.get_contract_type_data();
      }
      if (sessionStorage.getItem("contract_state_data")) {
        this.contract_state_data = JSON.parse(
          sessionStorage.getItem("contract_state_data")
        );
      } else {
        this.get_contract_state_data();
      }
      if (sessionStorage.getItem("product_line_type_data")) {
        this.product_line_type_data = JSON.parse(
          sessionStorage.getItem("product_line_type_data")
        );
      } else {
        this.get_product_line_type_data();
      }
    }
  };
</script>

<style scoped>
span {
  padding-right: 10px;
}
#search >>> label {
  color: black;
}
#search >>> .el-card {
  background-color: rgba(0, 0, 0, 0);
}
#search >>> .el-card__body {
  background-color: rgba(0, 0, 0, 0);
}
#search >>> input {
  border-color: black;
  color: black;
  background-color: rgba(0, 0, 0, 0.3);
}
#search >>> .el-card__header {
  background-color: #34352c;
}
#search >>> .cell {
  color: black;
}
#data_table .el-table__expanded-cell .pre {
  text-decoration: underline;
  /* font-style: oblique; */
  color: #555;
}
#data_table {
  color: black;
}
#search >>> tr,
#search >>> .el-table {
  background-color: rgba(255, 255, 255, 0.3);
}
#search >>> .el-table__row {
  background-color: rgba(0, 0, 0, 0.1);
}
#search >>> th {
  background-color: rgba(0, 0, 0, 0);
}
#search >>> .el-table__expanded-cell {
  background-color: rgba(0, 0, 0, 0);
}
#search >>> .el-pager li {
  background-color: rgba(255, 255, 255, 0.3);
}
#search >>> .el-pager .active {
  background-color: rgba(0, 0, 0, 0.4);
}
#search >>> .el-pagination .btn-next,
#search >>> .el-pagination .btn-prev {
  background-color: rgba(0, 0, 0, 0.4);
}
i:hover {
  cursor: pointer;
  color: orangered;
  transition: all ease 0.5s;
}

</style>