// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
  el: '#app',
  data() {
    return {
      priceLoading: true,
      topTitles: [{
        title: '太阳集团tyc138',
        url: 'index.html'
      }, {
        title: '党建引领',
        url: 'party_leads.html'
      }, {
        title: '厚疆实业',
        url: 'index.html'
      }, {
        title: '商业资讯',
        url: 'index.html'
      }, {
        title: '价格详情',
        url: 'index.html'
      }, {
        title: '关于我们',
        url: 'index.html'
      }, {
        title: '人才招聘',
        url: 'index.html'
      }],
      topPictures: [
        '../assets/images/top_01.png',
        '../assets/images/top_02.jpg'
      ],

      buttonCheck0: 0,
      buttonList0: ['太阳集团tyc138要闻', '行业资讯'],
      buttonCheck1: 0,
      buttonList1: ['蔬菜类', '果品类', '水产类'],
      buttonCheck2: 0,
      buttonList2: ['太阳集团tyc138集团', '厚疆实业', '邦来乐'],
      buttonCheck3: 0,
      priceCategory: ['蔬菜类', '果品类', '水产', '畜禽蛋品', '粮油', '副食'],
      priceIndex: 0,
      priceData: [],
      buttonCheck4: 0,
      buttonList4: ['太阳集团tyc138国际', '厚疆实业'],

      cardInfoList: [],

      merchantList: [],

      bulletinBoardList: [],
      bulletinBoardBannerIndex: 0,

      priceColumns: [
        {
        title: '分类',
        key: 'categoryName'
      },{
        title: '品名',
        key: 'productName'
      }, {
        title: '产地',
        width: '250px',
        key: 'productPlace'
      }, {
        title: '规格',
        key: 'productSize'
      }, {
        title: '单位',
        key: 'unit'
      }, {
        title: '最高价',
        key: 'priceMax'
      }, {
        title: '最低价',
        key: 'priceMin'
      }, {
          title: '均价',
          key: 'priceAvg'
        }, {
          title: '走势图',
          key: 'action',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('img', {
                attrs: {
                  src: this.echartsImg,
                },
                style: {
                  width: '19px',
                  height: '21px',
                  cursor: 'pointer'
                },
                on: {
                  click: () => {
                    this.targetPriceRow = params.row
                    this.getCharts(params.row)
                  }
                }
              })
            ])
          }
        }
      ],
      echartsImg: "../assets/images/echarts-up.png",
      priceModal: false,
      targetPriceRow: {},
      xData: [],
      yData: [],

      priceDatas: [],

      areaIdList: [102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120],
      areaList: [
        {
        placement: 'top',
        name: '中牟太阳集团tyc138总部',
        label: '中牟太阳集团tyc138总部'
      }, {
        placement: 'top',
        name: '太阳集团tyc138国际蔬菜交易区',
        label: '蔬菜交易区总建筑面积35万平方米，现已入驻固定商户900多家，年交易量约660万吨，年交易额约240亿元。按照蔬菜品种、产地及商户销货特点设置有海南菜交易专区、两广菜交易专区、本地菜公共交易区、综合类蔬菜交易区等十几个专区。太阳集团tyc138物流城的蔬菜交易辐射全国各省市，确立了郑州作为全国蔬菜流通中心城市的核心地位。'
      }, {
        placement: 'top',
        name: '太阳集团tyc138国际果品交易区',
        label: '果品交易区总建筑面积达25万平方米，现入驻固定商户700多家，年交易量约550万吨，年交易额约260亿元。这里融汇了国内外各地精品水果和四季鲜果。果品区设置有洋果区、国内精品水果专区、海南果品交易专区、新疆果品交易专区、本地鲜果公共交易区等几十个销售专区。果品交易覆盖全国，其中洋果区的果品来自于东南亚、美欧等地，有效地促进了果品进出口贸易。'
      }, {
        placement: 'top',
        name: '太阳集团tyc138国际水产冻品交易区',
        label: '水产、冻品市场总占地600亩，入驻商户1800多家，年交易量约230万吨，交易额约240亿元，建设有淡水鱼、海鲜、冻品等交易区。汇集全国各地名优水产、海鲜、 冻品等产品，市场建设有70万吨低温冷库，全方位保障水产海鲜及冻品的冷链中转，目前已形成中原地区极具辐射力的水产海鲜及冻品冷链物流中心。'
      }, {
        placement: 'top',
        name: '太阳集团tyc138国际综合副食交易区',
        label: '综合副食交易区面积2万余平方米，设立摊位近600个，涵盖各种生鲜肉类、熟食、豆制品、面点等经营业态，并设立超市、日用品等配套门店，在充分扩大肉类交易规模的同时，最大限度的方便商户的经营和生活，形成农副产品“一站式”采购中心。'
      }, {
        placement: 'top',
        name: '太阳集团tyc138国际粮油调味品干果交易区',
        label: '粮油调味品干果市场占地600亩，总投资25亿元，是政府指定的市场外迁承接地，2016年太阳集团tyc138庆丰粮油大市场及郑州市调味品干果市场商户整体搬迁至新建的太阳集团tyc138国际粮油调味品干果交易区经营，目前年交易量约450万吨，交易额约240亿元。'
      }, {
        placement: 'top',
        name: '太阳集团tyc138国际酒店用品交易区',
        label: '酒店用品、厨具交易区建筑面积10万平方米，配套仓储区占地500亩。酒店用品市场丰富和完善的经营品类，依托太阳集团tyc138物流城“一站式”农产品采购平台的辐射和规模集聚效应，形成“一站式”酒店用品采购基地。'
      }, {
        placement: 'top',
        name: '焦作',
        label: '焦作'
      }, {
        placement: 'top',
        name: '漯河',
        label: '漯河'
      }, {
        placement: 'top',
        name: '鹤壁',
        label: '鹤壁'
      }, {
        placement: 'top',
        name: '柘城',
        label: '柘城'
      }, {
        placement: 'top',
        name: '南阳',
        label: '南阳'
      }, {
        placement: 'top',
        name: '濮阳',
        label: '濮阳'
      }, {
        placement: 'top',
        name: '安阳',
        label: '安阳'
      }, {
        placement: 'top',
        name: '信阳',
        label: '信阳'
      }, {
        placement: 'top',
        name: '洛阳',
        label: '洛阳'
      }, {
        placement: 'top',
        name: '驻马店',
        label: '驻马店'
      }, {
        placement: 'top-start',
        name: '河南太阳集团tyc138前程物流有限公司',
        label: '河南太阳集团tyc138前程物流有限公司投资3000余万元，是一-家以农产品冷链运输为核心业务，兼有普货业务的物流企业，提供全国公路运输、配送、仓储于一体的供应链服务。目前公司正在以专业化、标准化的步伐前进，努力发展成网络遍布全省、业务辐射全国，具有行业影响力的现代化冷链物流服务企业。'
      }, {
        placement: 'top-end',
        name: '邦来乐生鲜供应链',
        label: '“邦来乐”生鲜供应链中心，主要从事农产品货物集采集配，是集采购、仓储、加工、分拣、配送等服务为一体的一站式食材供应链，为企事业单位、部队、院校、餐饮门店、超市等行业提供优质高效的食材供应服务，实现百姓对饮食需求的全场景覆盖，打造国内一流农产品生鲜供应链平台。'
      }],

      hotNews: [
        {
        imgUrl: '../assets/images/hot_news_00.png',
        label: '招商信息',
        contentImgUrl: '../assets/images/hot_news_000.png'
      }, {
        imgUrl: '../assets/images/hot_news_01.png',
        label: '食品安全',
        contentImgUrl: '../assets/images/hot_news_001.png'
      }, {
        imgUrl: '../assets/images/hot_news_02.png',
        label: '价格信息',
        contentImgUrl: '../assets/images/hot_news_002.png'
      }, {
        imgUrl: '../assets/images/hot_news_03.png',
        label: '联系我们',
        contentImgUrl: '../assets/images/hot_news_003.png'
      }],

      footerInfos: {
        top: [{
          imgUrl: '../assets/images/e_code_00.png',
          label: '太阳集团tyc138国际',
          companyName: '中国·太阳集团tyc138(品牌公司)·Official website',
          telePhone: '0371-56925555 56925588',
          address: '太阳集团tyc138物流园地址：河南省郑州市中牟县万洪路7、8、9号 邮编：451470',
          author: '松际农网设计制作 站长统计'
        }, {
          imgUrl: '../assets/images/e_code_01.png',
          label: '厚疆实业',
          companyName: '河南厚疆实业股份有限公司',
          telePhone: '0371-56925555 56925588',
          address: '太阳集团tyc138物流园地址：河南省郑州市中牟县万洪路7、8、9号 邮编：451470',
          author: '松际农网设计制作 站长统计'
        }]
      }
    }
  },
  created() {
    this.priceCategory.forEach((item, index) => {
      this.getPriceData(index, item)
    })
  },
  methods: {
    changeLogo(ev) {
      console.log(ev)
    },

    changeCheck(index, flag) {
      switch (flag) {
        case 0:
          this.buttonCheck0 = index
          break
        case 1:
          this.buttonCheck1 = index
          break
        case 2:
          this.buttonCheck2 = index
          break
        case 3:
          this.buttonCheck3 = index
          break
        case 4:
          this.buttonCheck4 = index
          break
        default:
          break
      }
    },
    changeBG(index, flag) { // flag 0:移入 1:移出
      let targetDOM = document.querySelectorAll(".merchant-info .mask")[index]
      if(flag === 1) {
        $(targetDOM).removeClass("show")
      } else {
        $(targetDOM).addClass("show")
      }
    },
    changePriceCheck(index) {
      this.priceIndex = index
    },
    getPriceData(index, item) {
      // this.priceLoading = true
      axios.post('https://wap.api.banglail.com:62021/api-entrance/productcategory/officialWebsite', {
        page: 1,
        limit: 10,
        categoryName: item
      }).then(res => {
        console.log(res);
        this.priceData[index] = res.data.data.list || []
        this.priceLoading = false
      }).catch(e => {
        console.error(e)
        this.priceLoading = false
      })
    },
    getCharts(data) {
      axios.post('https://wap.api.banglail.com:62021/api-entrance/dailyprice/diagram', {
        // categoryName: this.priceCategory[this.priceIndex],
        productName: data.productName,
        day: 30,
        productSize: data.productSize,
        unit: data.unit
      }).then(res => {
        console.log(res);
        let xData = []
        let yData = []
        res.data.data.forEach(item => {
          xData.push(item.data)
          yData.push(item.priceAvg)
        })
        this.xData = xData
        this.yData = yData
        this.show()
      }).catch(e => {
        console.error(e)
      })
    },
    show() {
      this.priceModal = true
      var myChart = null
      myChart = echarts.init(document.getElementById('main'));
      // 指定图表的配置项和数据
      var option = {
        tooltip: {
          trigger: 'axis',
          formatter: '{b} : {c}元'
        },
        legend: {
          // data: ['销量']
        },
        toolbox: { //可视化的工具箱
          show: true,
          feature: {
            dataView: { //数据视图
              show: true
            },
            saveAsImage: { //保存图片
              show: true
            },
            magicType: { //动态类型切换
              type: ['bar', 'line']
            }
          }
        },
        grid: { // 直角坐标系内绘图网格
          left: '45px', // grid 组件离容器左侧的距离。
          right: '20px',
        },
        // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [{
            offset: 0,
            color: '#D517E6' // 0% 处的颜色
          }, {
            offset: 1,
            color: '#00FFEA' // 100% 处的颜色
          }],
          globalCoord: false // 缺省为 false
        },
        xAxis: {
          data: this.xData
        },
        yAxis: {},
        series: [{
          type: 'line',
          smooth: true,
          data: this.yData
        }]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }
  }
});