<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="统计代码" name="1">
      <el-row>
        <!-- <el-col class="hidden-sm-and-down" :md="4" :lg="5" :xl="8" style="height: 1px;"></el-col> -->
        <el-col :xs="24" :sm="24" :md="16" :lg="14" :xl="8">
          <el-form ref="setbaidustatisticsform" label-width="120px" :model="setBaiduStatistics" :rules="baiduStatisticsRules">
            <el-form-item label="百度统计">
              点击进入百度统计查看网站访问数据&nbsp;&nbsp;&nbsp;&nbsp;<el-button type="primary" size="small" @click="goBaiduCount">访问百度统计</el-button>
            </el-form-item>
            <el-form-item label="代码统计" prop="desc">
              <el-input type="textarea" :autosize="{ minRows: 6 }" v-model="setBaiduStatistics.desc"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmitSetBaiduStatistics">保存</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-tab-pane>
    <el-tab-pane label="站长工具" name="2">
      <el-row>
        <!-- <el-col class="hidden-sm-and-down" :md="4" :lg="5" :xl="8" style="height: 1px;"></el-col> -->
        <el-col :xs="24" :sm="24" :md="16" :lg="14" :xl="8">
          <el-form ref="setbaiduwebmasterform" label-width="120px" :model="setBaiduWebmaster" :rules="baiduWebmasterRules">
            <el-form-item label="百度站长">
              点击进入百度站长工具管理网站&nbsp;&nbsp;&nbsp;&nbsp;<el-button type="primary" size="small" @click="goBaiduWebmaster">访问百度站长</el-button>
            </el-form-item>
            <el-form-item label="验证文件" prop="files">
              <el-upload action="" ref="uploadwebmasterfile" :auto-upload="false">
                <el-button slot="trigger" size="medium">上传文件</el-button>
              </el-upload>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmitSetBaiduWebmaster">保存</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
  export default {
    data () {
      return {
        activeName: '1',
        setBaiduStatistics: {},
        baiduStatisticsRules: {
          'desc': [ { required: true, message: '请粘贴统计代码', trigger: 'blur' } ]
        },
        setBaiduWebmaster: {},
        baiduWebmasterRules: {
          'files': [ { required: true, message: '请选择文件', trigger: 'blur' } ]
        }
      }
    },
    methods: {
      handleClick (tab, event) { /* console.log(tab, event) */ },
      /* 百度代码统计提交 */
      onSubmitSetBaiduStatistics () {
        this.$refs['setbaidustatisticsform'].validate((valid) => {
          if (valid) {
            console.log('submit!')
          } else {
            this.$message.error('请检查输入项，确认无误后，重新提交')
            return false
          }
        })
      },
      /* 跳转百度统计 - 官方页面 */
      goBaiduCount () {
        window.open('https://tongji.baidu.com/web/welcome/login?castk=LTE%3D')
      },
      /* 百度站长文件提交 */
      onSubmitSetBaiduWebmaster () {
        console.log(this.$refs.uploadwebmasterfile)
        this.$refs['setbaiduwebmasterform'].validate((valid) => {
          if (valid) {
            console.log('submit!')
          } else {
            this.$message.error('请检查输入项，确认无误后，重新提交')
            return false
          }
        })
      },
      goBaiduWebmaster () {
        window.open('https://ziyuan.baidu.com/dashboard/index')
      }
    }
  }
</script>
